您好,登錄后才能下訂單哦!
使用ElementUi搭建框架的時(shí)候,大家應(yīng)該都有考慮過怎么做全局驗(yàn)證,畢竟復(fù)制粘貼什么的是最煩了,這里分享下個(gè)人的解決方法。
驗(yàn)證規(guī)則
分析規(guī)則
一般驗(yàn)證規(guī)則,主要是是否必填,不為空,以及參數(shù)類型的驗(yàn)證。
基于這個(gè)條件,我們開始找找思路, 單個(gè)字段的驗(yàn)證是這樣的:
name: { required: 是否必填, validator: 自定義規(guī)則, message: 失敗提示消息(非自定義時(shí)觸發(fā)), trigger: 觸發(fā)方式 }
循環(huán)實(shí)現(xiàn)
固定的規(guī)則。當(dāng)一個(gè)東西固定之后,那必然是可以重復(fù)使用的,并且可以快速生成,我們可以用循環(huán)來實(shí)現(xiàn)它。
但是用循環(huán)來實(shí)現(xiàn),我們則需要一個(gè)數(shù)據(jù)規(guī)則。
定義數(shù)據(jù)規(guī)則
分析下需要的字段,大概就是以下幾種,其他的可以根據(jù)自身的需求去增加:
那最終我們得到的是這樣一個(gè)字段配置列表:
fieldList: [ {label: '賬號(hào)', 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: '手機(jī)號(hào)碼', value: 'phone', type: 'input'}, {label: '微信', value: 'wechat', type: 'input'}, {label: 'QQ', value: 'qq', type: 'input'}, {label: '郵箱', value: 'email', type: 'input'}, {label: '狀態(tài)', value: 'status', type: 'select', list: 'statusList', required: true} ]
form完整的字段配置建議參考:
// 表單相關(guān) formInfo: { ref: null, data: { id: '', // *唯一ID account: '', // *用戶賬號(hào) password: '', // *用戶密碼 name: '', // *用戶昵稱 type: 2, // *用戶類型: 0: 手機(jī)注冊(cè) 1: 論壇注冊(cè) 2: 管理平臺(tái)添加 sex: 0, // *性別: 0:男 1:女 avatar: '', // 頭像 phone: '', // 手機(jī)號(hào)碼 wechat: '', // 微信 qq: '', // qq email: '', // 郵箱 status: 1 // *狀態(tài): 0:停用,1:?jiǎn)⒂?默認(rèn)為1)', // create_user: '', // 創(chuàng)建人 // create_time: '', // 創(chuàng)建時(shí)間 // update_user: '', // 修改人 // update_time: '' // 修改時(shí)間 }, fieldList: [ {label: '賬號(hào)', 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: '手機(jī)號(hào)碼', value: 'phone', type: 'input'}, {label: '微信', value: 'wechat', type: 'input'}, {label: 'QQ', value: 'qq', type: 'input'}, {label: '郵箱', value: 'email', type: 'input'}, {label: '狀態(tài)', value: 'status', type: 'select', list: 'statusList', required: true} ], rules: {}, labelWidth: '120px' }
實(shí)現(xiàn)驗(yàn)證方法
// 初始化驗(yàn)證數(shù)據(jù) _initRules (formInfo) { const obj = {}, fieldList = formInfo.fieldList // 循環(huán)字段列表 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: '請(qǐng)' + type + item.label, trigger: 'blur' } } } else if (item.rules) { obj[item.value] = { validator: item.rules, trigger: 'blur' } } } formInfo.rules = obj }
怎么配置到全局
最后
在項(xiàng)目的系統(tǒng)管理模塊中可以看到示例代碼:
項(xiàng)目地址
項(xiàng)目代碼地址
總結(jié)
以上所述是小編給大家介紹的使用mixins實(shí)現(xiàn)elementUI表單的全局驗(yàn)證的解決方法,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。