Vue表單驗證外掛程式的製作過程，vue表單製作過程

Vue表單驗證外掛程式的製作過程，vue表單製作過程

前言

前段時間，老大搭好了Vue的開發環境，於是我們愉快地從JQ來到了Vue。這中間做的時候，在表單驗證上做的不開心，看到vue的外掛程式章節，感覺自己也能寫一個，因此就自己開始寫了一個表單驗證外掛程式va.js。 當然為什麼不找個外掛程式呢？ vue-validator呀。

1.我想了下，一個是表單驗證是個高度定製化的東西，這種網上找到的外掛程式為了兼顧各個公司的需求，所以加了很多功能，這些我們不需要。事實證明，vue-validator有50kb，而我寫的va.js只有8kb。
2.另一個是，vue-validator的api我真的覺得長, 動不動就v-validate:username="['required']"，這麼一長串，而我設計的調用大概如——v-va:Money

當然，本文僅是展示下，如何寫個滿足自己公司需求的vue表單驗證外掛程式。下面介紹下思路。

一、表單驗證模組的構成

任何錶單驗證模組都是由 配置——校正——報錯——取值 這幾部分構成的。

• 配置： 配置規則 和配置報錯，以及優先順序
• 校正： 有在 change 事件校正， 在點擊提交按鈕的時候校正， 當然也有在input事件取值的
• 報錯： 報錯方式一般要分，報錯的文字有模板，也有自訂的
• 取值： 將通過驗證的資料返還給開發人員調用
  

下面是我老大針對公司項目給我提出的要求

• 集中式的管理 校正規則 和 報錯模板。
• 報錯時機可選
• 校正正確後的資料，已經打包成對象，可以直接用
• 允許各個頁面對規則進行覆蓋，對報錯資訊進行自訂修改，以及允許ajax擷取資料後，再對規則進行補充
• 按順序來校正，在第一個報錯的框彈出錯誤
  

我就很好奇地問， 為什麼要這樣子呢？然後老大就跟我一條一條解答：

• 集中式管理規則，和報錯模板的好處，就是規則可以全域通用，一改全改。老大跟我說，光是暱稱的正則就改了三次。如果這些正則寫在各個頁面，o(￣ヘ￣o#)哼，你就要改N個頁面了
• pc和移動的流程不一樣，pc很多校正都要在change事件或者input事件就校正並報錯了，而移動則一般是要到提交按鈕再進行校正。所以寫外掛程式的時候要做好兩手準備。然後，報錯用的ui要可以支援我們現在用的layer外掛程式。當然以後這個報錯的ui也可能變，所以你懂滴。
• 當然原來jq時代，我們的公用表單驗證，就能驗證完了，把資料都集合到一個對象裡。這樣ajax的時候，就不用再去取值了。你這個外掛程式耶要達到這個效果
• 原來jq的那個通用指令碼，正則和報錯都集中到一個地方去了，在很多地方已經很方便了。但是在一些頁面需要改東西的時候還不夠靈活。像RealName這個規則，最早是針對某個頁面配置的，用的是後端介面上的欄位名。另一個支付頁，後端介面上的欄位名改成了PayUser了，但是正則還是RealName的，原來我們是要複寫一下RealName。這個就不太方便也不好看了。另外一個，支付金額，有最大值和最小值的限制，這個需要從後端擷取的。你也要考慮這個情況。要做到各個頁面上也能有一些靈活的地方可以修改規則，自訂報錯等等。
• 為什麼要按順序校正啊？你忘了上次牛哥讓我們輸入框，從上到下，按順序報錯。不然使用者都不知道哪個地方錯了。還有規則也是要按順序的。哦哦哦。看來這次我放東西的時候，要用下數組了。盡量保持順序。
  

我聽了之後，大致懂了，原來之前自己寫的jq表單驗證還有這麼多不舒服的點。-_-|||接下來，是看看vue給我的好東西。讓我來寫

二、Vue 的外掛程式怎麼寫

我一個vue小白，怎麼就開始寫vue外掛程式了呢？那是因為想解決方案的時候，翻Vue文檔翻到了這裡

這些東東，等我寫完va.js的時候，感覺尤大寫的真的是很清楚了。

其實我是想寫個指令來完成表單驗證的事的。結果發現可能有2-3個指令，而且要再Vue.prototype上定義些方法，好讓各個子執行個體內部也能拓展規則。於是老大說，這就相當於外掛程式了。這讓我很是吃鯨。

va.js主要用的是 Vue指令

Vue 文檔真的寫得很用心，但是我再補充一點吧

vnode.context 就是Vue的執行個體

我們做項目的時候，經常一個根組件上掛著N個子組件，子組件上又可能掛著N個子組件。vnode.context擷取的執行個體，是綁定該指令的組件的執行個體。這個就相當好用了。你可以做很多事情

當然還用了點Vue.prototype
Vue.prototype.$method 就是可以在各個組件上調用的方法。可以在組件內部用 this.$method調用的

## 三、具體實現的思路 ##

核心思路如：

規則的建構函式

//va配置的建構函式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(區間), equal(與某個input相等)，unique(不能相同)
• typeVal: 根據不同type設定不同的值
• errMsg: 自訂的報錯資訊
• name: 用來傳ajax的欄位，如Password, Username
• tag：用來報錯的名字，如‘銀行帳號'，‘姓名'
  

設定了三種規則

1.預設規則： 只要綁定指令，就預設有的校正。 比如非空的校正。 可以額外加修飾符來去除
2.選項規則： 通過Vue指令的修飾符添加的規則。
3.自訂規則： Vue指令屬性值上添加的規則。
同一個type的規則只存在一個，也就是說，如果type為reg(正則),那麼會互相覆蓋。
覆蓋的優先順序： 自訂規則 > 選項規則 > 預設規則

思路講的多了。也不知道怎麼講了，下面大家直接看源碼把。

源碼

/**   流程： 綁定指令-> 設定配置(vaConfig) -> 校正(check) -> 報錯(showErr) 或 自訂報錯 */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  }}//校正函數function check(v, conditions){  var res = 0;                    //0代表OK, 若為數組代表是某個欄位的錯誤  //驗證函式  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)    //如果有自訂報錯資訊， 返回自訂的報錯資訊  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}格式錯誤`,    limit: `${name}必須在${ext[0]}與${ext[1]}之間`,    equal: `兩次${ext}不相同`,    unique: `${name}重複`  }  //使用layer來報錯，如果需要自訂報錯方式，要把全文的layer集中起來包一層。  layer.msgWarn(ERR_MSG[type])}/** * [VaConfig va配置的建構函式] * @param {[string]} type  [校正類型，如reg, limit等等] * @param {[*]} typeVal       [根據校正類型配置的值] * @param {[string]} errMsg [報錯資訊] * @param {[string]} name  [用以ajax的欄位名] * @param {[string]} tag   [中文名，用以報錯] */function VaConfig(type, typeVal, errMsg, name, tag){  this.type = type, this.typeVal = typeVal, this.errMsg = errMsg, this.name = name, this.tag = tag}//用來剔除重複的規則，以及規則的覆蓋。預設後面的取代前面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 = []                    //預設的校正規則             --不用寫，預設存在的規則（如非空）        ,optionalConfig = []                //使用者選擇的配置成套     --與name相關        ,customConfig = []                  //使用者自訂的規則（組件中） --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)     //預設非空,如果加了canNull的修飾符就允許為空白     if(!option.canNull){       baseCfg.push(NON_VOID)     }     //需要立即校正的框     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')        //傳給回調的參數          //如果允許為空白的此時為空白，不校正          if(value === '' && option.canNull){            vm.vaVal[name] = value            return          }          vm.vaResult[name] = check(value, conditions);          var _result = vm.vaResult[name]          if(_result){            //如果返回的是字串，則為自訂報錯； 如果是數組，則使用showErr 報錯            typeof _result === 'string' ? layer.msgWarn(_result) : showErr(conditions[0].tag, _result)            el.value = vm.vaVal[name] = ''            return          }          vm.vaVal[name] = value          vm.$vanow(para)          //寫在執行個體內部method的回調       })     }     //不能重複的     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對應的，直接就加進optionalConfig     if(regList[name]){       optionalConfig.push(regNew(regList[name]))     }     //使用者自訂的規則     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])         }       })     }     //規則由 預設規則 + 修飾符規則 + 寫在屬性的自訂規則 + 使用者直接加到vm.vaConfig裡的規則 合并（後面的同type規則會覆蓋前面的）     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,則有報錯          if(_result){            //如果返回的是字串，則為自訂報錯； 如果是數組，則使用showErr 報錯            typeof _result === 'string' ? layer.msgWarn(_result) : showErr(conditions[0].tag, _result)            return          }          vm.vaVal[name] = value        }        //校正通過的回調        vm.$vaSubmit()        // layer.msgWarn('全部校正成功')        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，則有報錯    console.log(_result)        if(_result){          //如果返回的是字串，則為自訂報錯； 如果是數組，則使用showErr 報錯          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]()      })    }  })  /**  ** 在執行個體的monuted周期使用 api設定自訂配置   */  Vue.prototype.VaConfig = VaConfig}module.exports = va

現在項目已經用起來了。當然表單驗證這種是高度定製化的。純粹分享個過程和思路。也算我這個vue新手的一次階段性成果吧。哈哈~

使用執行個體

第一個框，加了兩條指令

1.v-va:Password 這個代表使用配置表中password對應的配置（包括非空和正則，預設規則），同時應用Password作為校正成功擷取的 資料對象的key
2.tag為報錯顯示中此輸入框的名字

第二個框，為確認框，也加了兩個指令
1.v-va:checkPassword.Password = "[{'equal':'Password'}]"
一般v-va後面的第一個欄位為資料對象的key，他和正則對應的名字有可能不同。
這個欄位如果和配置表中的配置匹配，那麼自然應用配置。
如果不匹配，就要自己在後面用.的方式加配置（選項規則）。像這裡的Password。

最後面還有一個 屬性值 "[{'equal':'Password'}]"（自訂規則）。
這個地方用了數組，即會按這個數組的配置來進行校正。
同時這個數組有順序，順序代表規則的優先順序。
這個配置代表，這個框必須和上面那個Password的框值相等，否則報錯。
另外確認框不加入最後的結果資料對象。

2.tag 用來作為報錯資訊的名字

校正觸發按鈕 上面有一個指令 v-va-check
1.用來觸發校正
2.校正成功後，將資料對象存在執行個體的vaVal屬性下

根據上面的執行個體

規則的優先順序：
1.自訂規則 > 選項規則 > 預設規則
2.規則中的優先順序依照數組順序

另外，可以看到為了使用者方便，我在我們團隊中事先做了一些約定，並可能會用到 v-va、v-va-check、tag等指令，佔用了執行個體的兩個屬性名稱vaConfig、vaVal。這些約定和設定可以使使用者使用方便（通過配置控制校正時機， 校正成功後自然產生通過的資料對象，自訂報錯資訊等等）。但是也減少了這個外掛程式的普適性。

此方案僅提供各位做思路參考。個人認為，表單驗證是高度定製化的需求，盡量根據各個業務情況進行取捨。在我的方案中，並不像vue-validator一樣做了髒校正。

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。