溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
使用ElementUi搭建框架的時候，大家應該都有考慮過怎么做全局驗證，畢竟復制粘貼什么的是最煩了，這里分享下個人的解決方法。
驗證規則
分析規則
一般驗證規則，主要是是否必填，不為空，以及參數類型的驗證。
基于這個條件，我們開始找找思路, 單個字段的驗證是這樣的：
name: {
required: 是否必填,
validator: 自定義規則,
message: 失敗提示消息(非自定義時觸發),
trigger: 觸發方式
}
循環實現
固定的規則。當一個東西固定之后，那必然是可以重復使用的，并且可以快速生成，我們可以用循環來實現它。
但是用循環來實現，我們則需要一個數據規則。
定義數據規則
分析下需要的字段，大概就是以下幾種，其他的可以根據自身的需求去增加：
那最終我們得到的是這樣一個字段配置列表:
fieldList: [
{label: '賬號', value: 'account', type: 'input', required: true},
{label: '密碼', value: 'password', type: 'password', required: true},
{label: '昵稱', value: 'name', type: 'input', required: true},
{label: '性別', value: 'sex', type: 'select', list: 'sexList', required: true},
{label: '頭像', value: 'avatar', type: 'input'},
{label: '手機號碼', value: 'phone', type: 'input'},
{label: '微信', value: 'wechat', type: 'input'},
{label: 'QQ', value: 'qq', type: 'input'},
{label: '郵箱', value: 'email', type: 'input'},
{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: '', // 郵箱
status: 1 // *狀態: 0：停用，1：啟用(默認為1)',
// create_user: '', // 創建人
// create_time: '', // 創建時間
// update_user: '', // 修改人
// update_time: '' // 修改時間
},
fieldList: [
{label: '賬號', value: 'account', type: 'input', required: true},
{label: '密碼', value: 'password', type: 'password', required: true},
{label: '昵稱', value: 'name', type: 'input', required: true},
{label: '性別', value: 'sex', type: 'select', list: 'sexList', required: true},
{label: '頭像', value: 'avatar', type: 'input'},
{label: '手機號碼', value: 'phone', type: 'input'},
{label: '微信', value: 'wechat', type: 'input'},
{label: 'QQ', value: 'qq', type: 'input'},
{label: '郵箱', value: 'email', type: 'input'},
{label: '狀態', value: 'status', type: 'select', list: 'statusList', required: true}
],
rules: {},
labelWidth: '120px'
}
實現驗證方法
// 初始化驗證數據
_initRules (formInfo) {
const obj = {},
fieldList = formInfo.fieldList
// 循環字段列表
for (let item of fieldList) {
let type = item.type === 'select' ? '選擇' : '輸入'
if (item.required) {
if (item.rules) {
obj[item.value] = {
required: item.required,
validator: item.rules,
trigger: 'blur'
}
} else {
obj[item.value] = {
required: item.required,
message: '請' + type + item.label,
trigger: 'blur'
}
}
} else if (item.rules) {
obj[item.value] = {
validator: item.rules,
trigger: 'blur'
}
}
}
formInfo.rules = obj
}
怎么配置到全局
最后
在項目的系統管理模塊中可以看到示例代碼：
項目地址
項目代碼地址
總結
以上所述是小編給大家介紹的使用mixins實現elementUI表單的全局驗證的解決方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
