實(shí)現(xiàn)elementUI表單的全局驗(yàn)證的方法步驟
使用ElementUi搭建框架的時(shí)候,大家應(yīng)該都有考慮過(guò)怎么做全局驗(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)來(lái)實(shí)現(xiàn)它。 但是用循環(huán)來(lái)實(shí)現(xiàn),我們則需要一個(gè)數(shù)據(jù)規(guī)則。
定義數(shù)據(jù)規(guī)則
分析下需要的字段,大概就是以下幾種,其他的可以根據(jù)自身的需求去增加:
- 驗(yàn)證的字段名 label
- 驗(yàn)證的值 value
- 驗(yàn)證的類型 type
- 是否必填 required
- 自定義規(guī)則 validator
那最終我們得到的是這樣一個(gè)字段配置列表:
fieldList: [ {label: '賬號(hào)', 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: '手機(jī)號(hào)碼', 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: '狀態(tài)', value: 'status', type: 'select', list: 'statusList', required: true} ]
form完整的字段配置建議參考:
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: '', // 郵箱 desc: '', // 描述 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, 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: '手機(jī)號(hào)碼', 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: '狀態(tài)', value: 'status', type: 'select', list: 'statusList', required: true} ], rules: {}, labelWidth: '120px' }
實(shí)現(xiàn)驗(yàn)證方法
一: 循環(huán)字段列表,根據(jù)type判斷是提示選擇不能為空,還是輸入不能為空
二:如果字段必填,則根據(jù)是否有自定義驗(yàn)證去生成驗(yàn)證規(guī)則
三: 字段非必填,有自定義規(guī)則生成驗(yàn)證
// 初始化驗(yàn)證數(shù)據(jù) _initValidate (formInfo) { const obj = {}, fieldList = formInfo.fieldList // 循環(huán)字段列表 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: '請(qǐng)' + type + item.label, trigger: 'blur' } } } else if (item.validator) { obj[item.value] = { validator: item.validator, trigger: 'blur' } } } formInfo.rules = obj }
使用
結(jié)合上面的字段設(shè)計(jì),我在頁(yè)面上的使用是這樣的,大家可以根據(jù)自己的字段設(shè)計(jì)去修改,大致實(shí)現(xiàn)過(guò)程是這樣的
// mixin中的方法, 初始化字段驗(yàn)證規(guī)則 this._initValidate(this.formInfo)
怎么配置到全局
- 通過(guò)mixin配置,然后在頁(yè)面中使用(個(gè)人使用的是mixin)
- 配置為全局方法在頁(yè)面中調(diào)用
- 掛在到vue實(shí)例上,通過(guò)this即可訪問
mixins例子
export default { data () { /** * 頁(yè)面上的可復(fù)用的驗(yàn)證規(guī)則 */ // 驗(yàn)證號(hào)碼格式 const CHECK_PHONE = (rule, value, callback) => { let check = this.$validate({label: '號(hào)碼', value, rules: ['phone']}) if (!check.result) { callback(new Error(check.message)) } else { callback() } } // 驗(yàn)證號(hào)碼格式以及不能為空 const CHECK_PHONE_NOTNULL = (rule, value, callback) => { let check = this.$validate({label: '號(hào)碼', value, rules: ['notnull', 'phone']}) if (!check.result) { callback(new Error(check.message)) } else { callback() } } // 檢測(cè)郵箱格式 const CHECK_EMAIL = (rule, value, callback) => { let check = this.$validate({label: '郵箱', value, rules: ['email']}) if (!check.result) { callback(new Error(check.message)) } else { callback() } } // 檢測(cè)郵箱格式以及不能為空 const CHECK_EMAIL_NOTNULL = (rule, value, callback) => { let check = this.$validate({label: '郵箱', value, rules: ['notnull', 'email']}) if (!check.result) { callback(new Error(check.message)) } else { callback() } } return { CHECK_PHONE, CHECK_PHONE_NOTNULL, CHECK_EMAIL, CHECK_EMAIL_NOTNULL } }, methods: { // 初始化驗(yàn)證數(shù)據(jù) _initValidate (formInfo) { const obj = {}, fieldList = formInfo.fieldList // 循環(huán)字段列表 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: '請(qǐng)' + type + item.label, trigger: 'blur' } } } else if (item.validator) { obj[item.value] = { validator: item.validator, trigger: 'blur' } } } formInfo.rules = obj } } }
最后
在項(xiàng)目的系統(tǒng)管理模塊中可以看到示例代碼:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue.js最佳實(shí)踐(五招助你成為vuejs大師)
這篇文章主要介紹了Vue.js最佳實(shí)踐,本文主要面向?qū)ο笫怯幸欢╲ue.js 編輯經(jīng)驗(yàn)的開發(fā)者,需要的朋友可以參考下2018-05-05Vue3進(jìn)階主題Composition API使用詳解
這篇文章主要為大家介紹了Vue3進(jìn)階主題Composition API使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04解決echarts vue數(shù)據(jù)更新,視圖不更新問題(echarts嵌在vue彈框中)
這篇文章主要介紹了解決echarts vue數(shù)據(jù)更新,視圖不更新問題(echarts嵌在vue彈框中),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07vue項(xiàng)目如何去掉URL中#符號(hào)的方法
在開發(fā)過(guò)程中發(fā)現(xiàn)路徑中帶有/#/的標(biāo)示,而且還去不掉,很丑陋,下面這篇文章主要給大家介紹了vue項(xiàng)目如何去掉URL中#符號(hào)的相關(guān)資料,文中通過(guò)實(shí)例代碼的非常詳細(xì),需要的朋友可以參考下2022-07-07vue 組件使用中的一些細(xì)節(jié)點(diǎn)
這篇文章主要介紹了vue 組件使用中的一些細(xì)節(jié)點(diǎn),大概有兩大細(xì)節(jié)點(diǎn),本文通過(guò)基礎(chǔ)實(shí)例給大家介紹的非常詳細(xì),需要的朋友參考下吧2018-04-04基于vue-cli3+typescript的tsx開發(fā)模板搭建過(guò)程分享
這篇文章主要介紹了搭建基于vue-cli3+typescript的tsx開發(fā)模板,本文通過(guò)實(shí)例代碼截圖的形式給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-02-02基于Vue3+Three.js實(shí)現(xiàn)一個(gè)3D模型可視化編輯系統(tǒng)
這篇文章主要介紹了基于Vue3+Three.js實(shí)現(xiàn)一個(gè)3D模型可視化編輯系統(tǒng),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09vue踩坑記錄之echarts動(dòng)態(tài)數(shù)據(jù)刷新問題
這篇文章主要介紹了vue踩坑記錄之echarts動(dòng)態(tài)數(shù)據(jù)刷新問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-07-07