使用ElementUi搭建框架的時候，大家應該都有考慮過怎麼做全域性驗證，畢竟複製貼上什麼的是最煩了，這裡分享下個人的解決方法。
驗證規則
分析規則
一般驗證規則，主要是是否必填，不為空，以及引數型別的驗證。 基於這個條件，我們開始找找思路, 單個欄位的驗證是這樣的：
name: {
required: 是否必填,
validator: 自定義規則,
message: 失敗提示訊息(非自定義時觸發),
trigger: 觸發方式
}
複製程式碼迴圈實現
固定的規則。當一個東西固定之後，那必然是可以重複使用的，並且可以快速生成，我們可以用迴圈來實現它。 但是用迴圈來實現，我們則需要一個資料規則。
定義資料規則
分析下需要的欄位，大概就是以下幾種，其他的可以根據自身的需求去增加：
- 驗證的欄位名 label
- 驗證的值 value
- 驗證的型別 type
- 是否必填 required
- 自定義規則 validator
那最終我們得到的是這樣一個欄位配置列表:
fieldList: [
{label: '賬號', value: 'account', type: 'input', required: true, validator: checkAccount},
{label: '密碼', value: 'password', type: 'password', required: true, validator: checkPwd},
{label: '暱稱', value: 'name', type: 'input', required: true},
{label: '性別', value: 'sex', type: 'select', list: 'sexList', required: true},
{label: '頭像', value: 'avatar', type: 'slot', className: 'el-form-block'},
{label: '手機號碼', value: 'phone', type: 'input', validator: checkPhone},
{label: '微信', value: 'wechat', type: 'input', validator: checkWechat},
{label: 'QQ', value: 'qq', type: 'input', validator: checkQQ},
{label: '郵箱', value: 'email', type: 'input', validator: checkEmail},
{label: '描述', value: 'desc', type: 'textarea', className: 'el-form-block'},
{label: '狀態', value: 'status', type: 'select', list: 'statusList', required: true}
]
複製程式碼form完整的欄位配置建議參考：
formInfo: {
ref: null,
data: {
id: '', // *唯一ID
account: '', // *使用者賬號
password: '', // *使用者密碼
name: '', // *使用者暱稱
type: 2, // *使用者型別: 0: 手機註冊 1: 論壇註冊 2: 管理平臺新增
sex: 0, // *性別: 0:男 1:女
avatar: '', // 頭像
phone: '', // 手機號碼
wechat: '', // 微信
qq: '', // qq
email: '', // 郵箱
desc: '', // 描述
status: 1 // *狀態: 0：停用，1：啟用(預設為1)',
// create_user: '', // 建立人
// create_time: '', // 建立時間
// update_user: '', // 修改人
// update_time: '' // 修改時間
},
fieldList: [
{label: '賬號', value: 'account', type: 'input', required: true, validator: checkAccount},
{label: '密碼', value: 'password', type: 'password', required: true, validator: checkPwd},
{label: '暱稱', value: 'name', type: 'input', required: true},
{label: '性別', value: 'sex', type: 'select', list: 'sexList', required: true},
{label: '頭像', value: 'avatar', type: 'slot', className: 'el-form-block'},
{label: '手機號碼', value: 'phone', type: 'input', validator: checkPhone},
{label: '微信', value: 'wechat', type: 'input', validator: checkWechat},
{label: 'QQ', value: 'qq', type: 'input', validator: checkQQ},
{label: '郵箱', value: 'email', type: 'input', validator: checkEmail},
{label: '描述', value: 'desc', type: 'textarea', className: 'el-form-block'},
{label: '狀態', value: 'status', type: 'select', list: 'statusList', required: true}
],
rules: {},
labelWidth: '120px'
}
複製程式碼實現驗證方法
- 一: 迴圈欄位列表，根據type判斷是提示選擇不能為空，還是輸入不能為空
- 二：如果欄位必填，則根據是否有自定義驗證去生成驗證規則
- 三: 欄位非必填，有自定義規則生成驗證
// 初始化驗證資料
_initValidate (formInfo) {
const obj = {},
fieldList = formInfo.fieldList
// 迴圈欄位列表
for (let item of fieldList) {
let type = item.type === 'select' ? '選擇' : '輸入'
if (item.required) {
if (item.validator) {
obj[item.value] = {
required: item.required,
validator: item.validator,
trigger: 'blur'
}
} else {
obj[item.value] = {
required: item.required,
message: '請' + type + item.label,
trigger: 'blur'
}
}
} else if (item.validator) {
obj[item.value] = {
validator: item.validator,
trigger: 'blur'
}
}
}
formInfo.rules = obj
}
複製程式碼怎麼配置到全域性
- 通過mixin配置，然後在頁面中使用(個人使用的是mixin)
- 配置為全域性方法在頁面中呼叫
- 掛在到vue例項上，通過this即可訪問