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 就是可以在各個組件上調用的方法?？梢栽诮M件內部用 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一樣做了臟校驗。

感謝各位的閱讀！關于“Vue如何制作表單驗證插件”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！