Vue表單驗(yàn)證插件的制作過程
前言
前段時(shí)間,老大搭好了Vue的開發(fā)環(huán)境,于是我們愉快地從JQ來到了Vue。這中間做的時(shí)候,在表單驗(yàn)證上做的不開心,看到vue的插件章節(jié),感覺自己也能寫一個(gè),因此就自己開始寫了一個(gè)表單驗(yàn)證插件va.js。 當(dāng)然為什么不找個(gè)插件呢? vue-validator呀。
1.我想了下,一個(gè)是表單驗(yàn)證是個(gè)高度定制化的東西,這種網(wǎng)上找到的插件為了兼顧各個(gè)公司的需求,所以加了很多功能,這些我們不需要。事實(shí)證明,vue-validator有50kb,而我寫的va.js只有8kb。
2.另一個(gè)是,vue-validator的api我真的覺得長, 動不動就v-validate:username="['required']",這么一長串,而我設(shè)計(jì)的調(diào)用大概如——v-va:Money
當(dāng)然,本文僅是展示下,如何寫個(gè)滿足自己公司需求的vue表單驗(yàn)證插件。下面介紹下思路。
一、表單驗(yàn)證模塊的構(gòu)成
任何表單驗(yàn)證模塊都是由 配置——校驗(yàn)——報(bào)錯(cuò)——取值 這幾部分構(gòu)成的。
- 配置: 配置規(guī)則 和配置報(bào)錯(cuò),以及優(yōu)先級
- 校驗(yàn): 有在 change 事件校驗(yàn), 在點(diǎn)擊提交按鈕的時(shí)候校驗(yàn), 當(dāng)然也有在input事件取值的
- 報(bào)錯(cuò): 報(bào)錯(cuò)方式一般要分,報(bào)錯(cuò)的文字有模板,也有自定義的
- 取值: 將通過驗(yàn)證的數(shù)據(jù)返還給開發(fā)者調(diào)用
下面是我老大針對公司項(xiàng)目給我提出的要求
- 集中式的管理 校驗(yàn)規(guī)則 和 報(bào)錯(cuò)模板。
- 報(bào)錯(cuò)時(shí)機(jī)可選
- 校驗(yàn)正確后的數(shù)據(jù),已經(jīng)打包成對象,可以直接用
- 允許各個(gè)頁面對規(guī)則進(jìn)行覆蓋,對報(bào)錯(cuò)信息進(jìn)行自定義修改,以及允許ajax獲取數(shù)據(jù)后,再對規(guī)則進(jìn)行補(bǔ)充
- 按順序來校驗(yàn),在第一個(gè)報(bào)錯(cuò)的框彈出錯(cuò)誤
我就很好奇地問, 為什么要這樣子呢?然后老大就跟我一條一條解答:
- 集中式管理規(guī)則,和報(bào)錯(cuò)模板的好處,就是規(guī)則可以全局通用,一改全改。老大跟我說,光是昵稱的正則就改了三次。如果這些正則寫在各個(gè)頁面,o( ̄ヘ ̄o#)哼,你就要改N個(gè)頁面了
- pc和移動的流程不一樣,pc很多校驗(yàn)都要在change事件或者input事件就校驗(yàn)并報(bào)錯(cuò)了,而移動則一般是要到提交按鈕再進(jìn)行校驗(yàn)。所以寫插件的時(shí)候要做好兩手準(zhǔn)備。然后,報(bào)錯(cuò)用的ui要可以支持我們現(xiàn)在用的layer插件。當(dāng)然以后這個(gè)報(bào)錯(cuò)的ui也可能變,所以你懂滴。
- 當(dāng)然原來jq時(shí)代,我們的公用表單驗(yàn)證,就能驗(yàn)證完了,把數(shù)據(jù)都集合到一個(gè)對象里。這樣ajax的時(shí)候,就不用再去取值了。你這個(gè)插件耶要達(dá)到這個(gè)效果
- 原來jq的那個(gè)公用腳本,正則和報(bào)錯(cuò)都集中到一個(gè)地方去了,在很多地方已經(jīng)很方便了。但是在一些頁面需要改東西的時(shí)候還不夠靈活。像RealName這個(gè)規(guī)則,最早是針對某個(gè)頁面配置的,用的是后端接口上的字段名。另一個(gè)支付頁,后端接口上的字段名改成了PayUser了,但是正則還是RealName的,原來我們是要復(fù)寫一下RealName。這個(gè)就不太方便也不好看了。另外一個(gè),支付金額,有最大值和最小值的限制,這個(gè)需要從后端獲取的。你也要考慮這個(gè)情況。要做到各個(gè)頁面上也能有一些靈活的地方可以修改規(guī)則,自定義報(bào)錯(cuò)等等。
- 為什么要按順序校驗(yàn)???你忘了上次牛哥讓我們輸入框,從上到下,按順序報(bào)錯(cuò)。不然用戶都不知道哪個(gè)地方錯(cuò)了。還有規(guī)則也是要按順序的。哦哦哦??磥磉@次我放東西的時(shí)候,要用下數(shù)組了。盡量保持順序。
我聽了之后,大致懂了,原來之前自己寫的jq表單驗(yàn)證還有這么多不舒服的點(diǎn)。-_-|||接下來,是看看vue給我的好東西。讓我來寫
二、Vue 的插件怎么寫
我一個(gè)vue小白,怎么就開始寫vue插件了呢?那是因?yàn)橄虢鉀Q方案的時(shí)候,翻Vue文檔翻到了這里
這些東東,等我寫完va.js的時(shí)候,感覺尤大寫的真的是很清楚了。
其實(shí)我是想寫個(gè)指令來完成表單驗(yàn)證的事的。結(jié)果發(fā)現(xiàn)可能有2-3個(gè)指令,而且要再Vue.prototype上定義些方法,好讓各個(gè)子實(shí)例內(nèi)部也能拓展規(guī)則。于是老大說,這就相當(dāng)于插件了。這讓我很是吃鯨。
va.js主要用的是 Vue指令
Vue 文檔真的寫得很用心,但是我再補(bǔ)充一點(diǎn)吧
vnode.context 就是Vue的實(shí)例
我們做項(xiàng)目的時(shí)候,經(jīng)常一個(gè)根組件上掛著N個(gè)子組件,子組件上又可能掛著N個(gè)子組件。vnode.context獲取的實(shí)例,是綁定該指令的組件的實(shí)例。這個(gè)就相當(dāng)好用了。你可以做很多事情
當(dāng)然還用了點(diǎn)Vue.prototype
Vue.prototype.$method 就是可以在各個(gè)組件上調(diào)用的方法??梢栽诮M件內(nèi)部用 this.$method調(diào)用的
## 三、具體實(shí)現(xiàn)的思路 ##
核心思路如下圖:
規(guī)則的構(gòu)造函數(shù)
//va配置的構(gòu)造函數(shù) function VaConfig(type, typeVal, errMsg, name, tag){ this.type = type, this.typeVal = typeVal, this.errMsg = errMsg, this.name = name, this.tag = tag }
- type: nonvoid(非空), reg(正則), limit(區(qū)間), equal(與某個(gè)input相等),unique(不能相同)
- typeVal: 根據(jù)不同type設(shè)置不同的值
- errMsg: 自定義的報(bào)錯(cuò)信息
- name: 用來傳ajax的字段,如Password, Username
- tag:用來報(bào)錯(cuò)的名字,如‘銀行賬號',‘姓名'
設(shè)置了三種規(guī)則
1.默認(rèn)規(guī)則: 只要綁定指令,就默認(rèn)有的校驗(yàn)。 比如非空的校驗(yàn)。 可以額外加修飾符來去除
2.選項(xiàng)規(guī)則: 通過Vue指令的修飾符添加的規(guī)則。
3.自定義規(guī)則: Vue指令屬性值上添加的規(guī)則。
同一個(gè)type的規(guī)則只存在一個(gè),也就是說,如果type為reg(正則),那么會互相覆蓋。
覆蓋的優(yōu)先級: 自定義規(guī)則 > 選項(xiàng)規(guī)則 > 默認(rèn)規(guī)則
思路講的多了。也不知道怎么講了,下面大家直接看源碼把。
源碼
/* * 流程: 綁定指令-> 設(shè)置配置(vaConfig) -> 校驗(yàn)(check) -> 報(bào)錯(cuò)(showErr) 或 自定義報(bào)錯(cuò) */ var va = {}; function unique(arr){ var hashTable = {}, newArr = []; for(var i = 0;i < arr.length;i++){ if(!hashTable[arr[i]]){ hashTable[arr[i]] = true; newArr.push(arr[i]); } } return newArr; } function addClass(dom, _class){ var hasClass = !!dom.className.match(new RegExp('(\\s|^)' + _class + '(\\s|$)')) if(!hasClass){ dom.className += ' ' + _class } } //校驗(yàn)函數(shù) function check(v, conditions){ var res = 0; //0代表OK, 若為數(shù)組代表是某個(gè)字段的錯(cuò)誤 //驗(yàn)證函數(shù) var cfg = { //非空 nonvoid: (v, bool)=>{ if(bool){ return v.trim() ? 0 : ['nonvoid']; }else{ return 0; } }, reg:(v, reg)=> reg.test(v) ? 0 : ['reg'], //正則 limit:(v, interval)=> (+v >= interval[0] && +v <= interval[1]) ? 0 : ['limit', interval], equal: (v, target)=>{ //和什么相等 var _list = document.getElementsByName(target), _target for(var i = 0;i < _list.length;i++){ if(_list[i].className.indexOf('va') > -1){ _target = _list[i]; } } return (_target.value === v) ? 0 : ['equal', _target.getAttribute('tag')] }, unique:(v)=>{ var _list = document.getElementsByClassName('unique'), valList = [].map.call(_list, item=>item.value) return (unique(valList).length === valList.length) ? 0 : ['unique'] } } for(var i = 0;i < conditions.length;i++){ var condi = conditions[i], type = condi.type, typeVal = condi.typeVal res = cfg[type](v, typeVal) // console.log(res, v, type,typeVal) //如果有自定義報(bào)錯(cuò)信息, 返回自定義的報(bào)錯(cuò)信息 console.log(res) if(res){ res = condi.errMsg || res break } } return res; } function showErr(name, checkResult){ var type = checkResult[0], ext = checkResult[1] || [] var ERR_MSG = { nonvoid: `${name}不能為空`, reg: `${name}格式錯(cuò)誤`, limit: `${name}必須在${ext[0]}與${ext[1]}之間`, equal: `兩次${ext}不相同`, unique: `${name}重復(fù)` } //使用layer來報(bào)錯(cuò),如果需要自定義報(bào)錯(cuò)方式,要把全文的layer集中起來包一層。 layer.msgWarn(ERR_MSG[type]) } /** * [VaConfig va配置的構(gòu)造函數(shù)] * @param {[string]} type [校驗(yàn)類型,如reg, limit等等] * @param {[*]} typeVal [根據(jù)校驗(yàn)類型配置的值] * @param {[string]} errMsg [報(bào)錯(cuò)信息] * @param {[string]} name [用以ajax的字段名] * @param {[string]} tag [中文名,用以報(bào)錯(cuò)] */ function VaConfig(type, typeVal, errMsg, name, tag){ this.type = type, this.typeVal = typeVal, this.errMsg = errMsg, this.name = name, this.tag = tag } //用來剔除重復(fù)的規(guī)則,以及規(guī)則的覆蓋。默認(rèn)后面的取代前面 Array.prototype.uConcat = function(arr){ var comb = this.concat(arr) ,unique = {} ,result = [] for(var i = 0;i < comb.length;i++){ // console.log(i, comb[i]) var type = comb[i].type if(unique[type]){ var index = unique[type].index unique[type] = comb[i] unique[type].index = index; }else{ unique[type] = comb[i] unique[type].index = i; } } for(var i= 0;i < 100;i++){ for(var item in unique){ if(unique[item].index === i){ delete unique[item].index result.push(unique[item]) } } } return result } //正則表 var regList = { ImgCode: /^[0-9a-zA-Z]{4}$/, SmsCode: /^\d{4}$/, MailCode: /^\d{4}$/, UserName: /^[\w|\d]{4,16}$/, Password: /^[\w!@#$%^&*.]{6,16}$/, Mobile: /^1[3|5|8]\d{9}$/, RealName: /^[\u4e00-\u9fa5 ]{2,10}$/, BankNum: /^\d{10,19}$/, Money: /^([1-9]\d*|0)$/, Answer: /^\S+$/, Mail: /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/ } va.install = function(Vue, options){ Vue.directive('va',{ bind:function(el, binding, vnode){ var vm = vnode.context ,name = binding.arg === 'EXTEND' ? el.getAttribute('name') : binding.arg ,tag = el.getAttribute('tag') ,baseCfg = [] //默認(rèn)的校驗(yàn)規(guī)則 --不用寫,默認(rèn)存在的規(guī)則(如非空) ,optionalConfig = [] //用戶選擇的配置成套 --與name相關(guān) ,customConfig = [] //用戶自定義的規(guī)則(組件中) --bingding.value ,option = binding.modifiers ,regMsg = el.getAttribute('regMsg') || '' var eazyNew = (type, typeVal) =>{return new VaConfig(type, typeVal, '', name, tag)} var regNew = (typeVal) =>{return new VaConfig('reg', typeVal, regMsg, name, tag)} //正則的新建 el.className = 'va' + vm._uid el.name = name vm.vaConfig || (vm.vaConfig = {}) var NON_VOID = eazyNew('nonvoid', true) //默認(rèn)非空,如果加了canNull的修飾符就允許為空 if(!option.canNull){ baseCfg.push(NON_VOID) } //需要立即校驗(yàn)的框 if(option.vanow){ el.addEventListener('change', function(){ vm.vaResult || (vm.vaResult = {}) vm.vaVal || (vm.vaVal = {}) var value = el.value, conditions = vm.vaConfig[name], para = el.getAttribute('va-para') //傳給回調(diào)的參數(shù) //如果允許為空的此時(shí)為空,不校驗(yàn) if(value === '' && option.canNull){ vm.vaVal[name] = value return } vm.vaResult[name] = check(value, conditions); var _result = vm.vaResult[name] if(_result){ //如果返回的是字符串,則為自定義報(bào)錯(cuò); 如果是數(shù)組,則使用showErr 報(bào)錯(cuò) typeof _result === 'string' ? layer.msgWarn(_result) : showErr(conditions[0].tag, _result) el.value = vm.vaVal[name] = '' return } vm.vaVal[name] = value vm.$vanow(para) //寫在實(shí)例內(nèi)部method的回調(diào) }) } //不能重復(fù)的 if(option.unique){ optionalConfig.push(eazyNew('unique', name)) } //如果有在正則表里 var regOptions = Object.keys(option); for(var i = 0;i < regOptions.length;i++){ var regOption = regOptions[i] if(regList[regOptions[i]]){ optionalConfig.push(regNew(regList[regOption])) } } //如果regList里有name對應(yīng)的,直接就加進(jìn)optionalConfig if(regList[name]){ optionalConfig.push(regNew(regList[name])) } //用戶自定義的規(guī)則 if(binding.value){ customConfig = binding.value.map(item=>{ let type = Object.keys(item)[0]; if(type === 'reg'){ return regNew(item[type]) }else{ if(type === 'unique'){ addClass(el, 'unique') } return eazyNew(type, item[type]) } }) } //規(guī)則由 默認(rèn)規(guī)則 + 修飾符規(guī)則 + 寫在屬性的自定義規(guī)則 + 用戶直接加到vm.vaConfig里的規(guī)則 合并(后面的同type規(guī)則會覆蓋前面的) vm.vaConfig[name] || (vm.vaConfig[name] = []) vm.vaConfig[name] = baseCfg.uConcat(optionalConfig).uConcat(customConfig).uConcat(vm.vaConfig[name]) }, }) Vue.directive('va-check', { bind:function(el, binding, vnode){ var vm = vnode.context el.addEventListener('click', function(){ var domList = document.getElementsByClassName('va' + vm._uid); vm.vaResult || (vm.vaResult = {}) vm.vaVal || (vm.vaVal = {}) for(var i = 0;i < domList.length;i++){ var dom = domList[i], name = dom.name, value = dom.value, conditions = vm.vaConfig[name] var _result = check(value, conditions) //如果返回不為0,則有報(bào)錯(cuò) if(_result){ //如果返回的是字符串,則為自定義報(bào)錯(cuò); 如果是數(shù)組,則使用showErr 報(bào)錯(cuò) typeof _result === 'string' ? layer.msgWarn(_result) : showErr(conditions[0].tag, _result) return } vm.vaVal[name] = value } //校驗(yàn)通過的回調(diào) vm.$vaSubmit() // layer.msgWarn('全部校驗(yàn)成功') console.log(vm.vaVal) }) } }) Vue.directive('va-test',{ bind: function(el, binding, vnode){ var vm = vnode.context el.addEventListener('click', function(){ vm.vaResult || (vm.vaResult = {}) vm.vaVal || (vm.vaVal = {}) var dom = document.getElementsByName(binding.arg)[0], name = dom.name, value = dom.value, conditions = vm.vaConfig[name] var _result = check(value, conditions) //如果返回不為0,則有報(bào)錯(cuò) console.log(_result) if(_result){ //如果返回的是字符串,則為自定義報(bào)錯(cuò); 如果是數(shù)組,則使用showErr 報(bào)錯(cuò) typeof _result === 'string' ? layer.msgWarn(_result) : showErr(conditions[0].tag, _result) return } vm.vaVal[name] = value var callback = Object.keys(binding.modifiers)[0] vm[callback]() }) } }) /** ** 在實(shí)例的monuted周期使用 api設(shè)置自定義配置 */ Vue.prototype.VaConfig = VaConfig } module.exports = va
現(xiàn)在項(xiàng)目已經(jīng)用起來了。當(dāng)然表單驗(yàn)證這種是高度定制化的。純粹分享個(gè)過程和思路。也算我這個(gè)vue新手的一次階段性成果吧。哈哈~
使用實(shí)例
第一個(gè)框,加了兩條指令
1.v-va:Password 這個(gè)代表使用配置表中password對應(yīng)的配置(包括非空和正則,默認(rèn)規(guī)則),同時(shí)應(yīng)用Password作為校驗(yàn)成功獲取的 數(shù)據(jù)對象的key
2.tag為報(bào)錯(cuò)顯示中此輸入框的名字
第二個(gè)框,為確認(rèn)框,也加了兩個(gè)指令
1.v-va:checkPassword.Password = "[{'equal':'Password'}]"
一般v-va后面的第一個(gè)字段為數(shù)據(jù)對象的key,他和正則對應(yīng)的名字有可能不同。
這個(gè)字段如果和配置表中的配置匹配,那么自然應(yīng)用配置。
如果不匹配,就要自己在后面用.的方式加配置(選項(xiàng)規(guī)則)。像這里的Password。
最后面還有一個(gè) 屬性值 "[{'equal':'Password'}]"(自定義規(guī)則)。
這個(gè)地方用了數(shù)組,即會按這個(gè)數(shù)組的配置來進(jìn)行校驗(yàn)。
同時(shí)這個(gè)數(shù)組有順序,順序代表規(guī)則的優(yōu)先級。
這個(gè)配置代表,這個(gè)框必須和上面那個(gè)Password的框值相等,否則報(bào)錯(cuò)。
另外確認(rèn)框不加入最后的結(jié)果數(shù)據(jù)對象。
2.tag 用來作為報(bào)錯(cuò)信息的名字
校驗(yàn)觸發(fā)按鈕 上面有一個(gè)指令 v-va-check
1.用來觸發(fā)校驗(yàn)
2.校驗(yàn)成功后,將數(shù)據(jù)對象存在實(shí)例的vaVal屬性下
根據(jù)上面的實(shí)例
規(guī)則的優(yōu)先級:
1.自定義規(guī)則 > 選項(xiàng)規(guī)則 > 默認(rèn)規(guī)則
2.規(guī)則中的優(yōu)先級依照數(shù)組順序
另外,可以看到為了使用者方便,我在我們團(tuán)隊(duì)中事先做了一些約定,并可能會用到 v-va、v-va-check、tag等指令,占用了實(shí)例的兩個(gè)屬性名vaConfig、vaVal。這些約定和設(shè)置可以使使用者使用方便(通過配置控制校驗(yàn)時(shí)機(jī), 校驗(yàn)成功后自然生成通過的數(shù)據(jù)對象,自定義報(bào)錯(cuò)信息等等)。但是也減少了這個(gè)插件的普適性。
此方案僅提供各位做思路參考。個(gè)人認(rèn)為,表單驗(yàn)證是高度定制化的需求,盡量根據(jù)各個(gè)業(yè)務(wù)情況進(jìn)行取舍。在我的方案中,并不像vue-validator一樣做了臟校驗(yàn)。
本文已被整理到了《Vue.js前端組件學(xué)習(xí)教程》,歡迎大家學(xué)習(xí)閱讀。
關(guān)于vue.js組件的教程,請大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
使用Vite搭建vue3+TS項(xiàng)目的實(shí)現(xiàn)步驟
本文主要介紹了使用Vite搭建vue3+TS項(xiàng)目的實(shí)現(xiàn)步驟,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01Vue中 v-if 和v-else-if頁面加載出現(xiàn)閃現(xiàn)的問題及解決方法
vue中v-if 和v-else-if在頁面加載的時(shí)候,不滿足條件的標(biāo)簽會加載然后再消失掉,如果要解決這個(gè)問題,下面小編給大家?guī)砹藢?shí)例代碼,需要的朋友參考下吧2018-10-10vue監(jiān)聽瀏覽器的后退和刷新事件,阻止默認(rèn)的事件方式
這篇文章主要介紹了vue監(jiān)聽瀏覽器的后退和刷新事件,阻止默認(rèn)的事件方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10使用vue實(shí)現(xiàn)計(jì)時(shí)器功能
這篇文章主要為大家詳細(xì)介紹了使用vue實(shí)現(xiàn)計(jì)時(shí)器功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08vue3?v-bind="$attrs"繼承組件全部屬性的解決方案
這篇文章主要介紹了vue3?v-bind=“$attrs“?繼承組件全部屬性的解決方案,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-06-06如何使用 Vue Router 的 meta 屬性實(shí)現(xiàn)多種功能
在Vue.js中,Vue Router 提供了強(qiáng)大的路由管理功能,通過meta屬性,我們可以在路由定義中添加自定義元數(shù)據(jù),以實(shí)現(xiàn)訪問控制、頁面標(biāo)題設(shè)置、角色權(quán)限管理、頁面過渡效果,本文將總結(jié)如何使用 meta 屬性來實(shí)現(xiàn)這些常見的功能,感興趣的朋友一起看看吧2024-06-06VUE引入騰訊地圖并實(shí)現(xiàn)軌跡動畫的詳細(xì)步驟
這篇文章主要介紹了VUE引入騰訊地圖并實(shí)現(xiàn)軌跡動畫,引入步驟大概是在 html 中通過引入 script 標(biāo)簽加載API服務(wù),結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09