Vue如何制作表單驗證插件

這篇文章給大家分享的是有關(guān)Vue如何制作表單驗證插件的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

前言

前段時間，老大搭好了Vue的開發(fā)環(huán)境，于是我們愉快地從JQ來到了Vue。這中間做的時候，在表單驗證上做的不開心，看到vue的插件章節(jié)，感覺自己也能寫一個，因此就自己開始寫了一個表單驗證插件va.js。 當(dāng)然為什么不找個插件呢？ vue-validator呀。

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

當(dāng)然，本文僅是展示下，如何寫個滿足自己公司需求的vue表單驗證插件。下面介紹下思路。

一、表單驗證模塊的構(gòu)成

任何表單驗證模塊都是由 配置——校驗——報錯——取值 這幾部分構(gòu)成的。

• 配置： 配置規(guī)則 和配置報錯，以及優(yōu)先級

• 校驗： 有在 change 事件校驗， 在點擊提交按鈕的時候校驗， 當(dāng)然也有在input事件取值的

• 報錯： 報錯方式一般要分，報錯的文字有模板，也有自定義的

• 取值： 將通過驗證的數(shù)據(jù)返還給開發(fā)者調(diào)用
  

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

• 集中式的管理 校驗規(guī)則 和 報錯模板。

• 報錯時機(jī)可選

• 校驗正確后的數(shù)據(jù)，已經(jīng)打包成對象，可以直接用

• 允許各個頁面對規(guī)則進(jìn)行覆蓋，對報錯信息進(jìn)行自定義修改，以及允許ajax獲取數(shù)據(jù)后，再對規(guī)則進(jìn)行補(bǔ)充

• 按順序來校驗，在第一個報錯的框彈出錯誤
  

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

• 集中式管理規(guī)則，和報錯模板的好處，就是規(guī)則可以全局通用，一改全改。老大跟我說，光是昵稱的正則就改了三次。如果這些正則寫在各個頁面，o(￣ヘ￣o#)哼，你就要改N個頁面了

• pc和移動的流程不一樣，pc很多校驗都要在change事件或者input事件就校驗并報錯了，而移動則一般是要到提交按鈕再進(jìn)行校驗。所以寫插件的時候要做好兩手準(zhǔn)備。然后，報錯用的ui要可以支持我們現(xiàn)在用的layer插件。當(dāng)然以后這個報錯的ui也可能變，所以你懂滴。

• 當(dāng)然原來jq時代，我們的公用表單驗證，就能驗證完了，把數(shù)據(jù)都集合到一個對象里。這樣ajax的時候，就不用再去取值了。你這個插件耶要達(dá)到這個效果

• 原來jq的那個公用腳本，正則和報錯都集中到一個地方去了，在很多地方已經(jīng)很方便了。但是在一些頁面需要改東西的時候還不夠靈活。像RealName這個規(guī)則，最早是針對某個頁面配置的，用的是后端接口上的字段名。另一個支付頁，后端接口上的字段名改成了PayUser了，但是正則還是RealName的，原來我們是要復(fù)寫一下RealName。這個就不太方便也不好看了。另外一個，支付金額，有最大值和最小值的限制，這個需要從后端獲取的。你也要考慮這個情況。要做到各個頁面上也能有一些靈活的地方可以修改規(guī)則，自定義報錯等等。

• 為什么要按順序校驗??？你忘了上次牛哥讓我們輸入框，從上到下，按順序報錯。不然用戶都不知道哪個地方錯了。還有規(guī)則也是要按順序的。哦哦哦?？磥磉@次我放東西的時候，要用下數(shù)組了。盡量保持順序。
  

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

二、Vue 的插件怎么寫

我一個vue小白，怎么就開始寫vue插件了呢？那是因為想解決方案的時候，翻Vue文檔翻到了這里

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

其實我是想寫個指令來完成表單驗證的事的。結(jié)果發(fā)現(xiàn)可能有2-3個指令，而且要再Vue.prototype上定義些方法，好讓各個子實例內(nèi)部也能拓展規(guī)則。于是老大說，這就相當(dāng)于插件了。這讓我很是吃鯨。

va.js主要用的是 Vue指令

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

vnode.context 就是Vue的實例

我們做項目的時候，經(jīng)常一個根組件上掛著N個子組件，子組件上又可能掛著N個子組件。vnode.context獲取的實例，是綁定該指令的組件的實例。這個就相當(dāng)好用了。你可以做很多事情

當(dāng)然還用了點Vue.prototype
Vue.prototype.$method 就是可以在各個組件上調(diào)用的方法?？梢栽诮M件內(nèi)部用 this.$method調(diào)用的

## 三、具體實現(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(與某個input相等)，unique(不能相同)

• typeVal: 根據(jù)不同type設(shè)置不同的值

• errMsg: 自定義的報錯信息

• name: 用來傳ajax的字段，如Password, Username

• tag：用來報錯的名字，如‘銀行賬號'，‘姓名'
  

設(shè)置了三種規(guī)則

1.默認(rèn)規(guī)則： 只要綁定指令，就默認(rèn)有的校驗。 比如非空的校驗。 可以額外加修飾符來去除
2.選項規(guī)則： 通過Vue指令的修飾符添加的規(guī)則。
3.自定義規(guī)則： Vue指令屬性值上添加的規(guī)則。
同一個type的規(guī)則只存在一個，也就是說，如果type為reg(正則),那么會互相覆蓋。
覆蓋的優(yōu)先級： 自定義規(guī)則 > 選項規(guī)則 > 默認(rèn)規(guī)則

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

源碼

/*
* 流程： 綁定指令-> 設(shè)置配置(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
 }
}

//校驗函數(shù)
function check(v, conditions){
 var res = 0;     //0代表OK, 若為數(shù)組代表是某個字段的錯誤
 //驗證函數(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)
 //如果有自定義報錯信息， 返回自定義的報錯信息
 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}重復(fù)`
 }
 //使用layer來報錯，如果需要自定義報錯方式，要把全文的layer集中起來包一層。
 layer.msgWarn(ERR_MSG[type])
}

/**
 * [VaConfig va配置的構(gòu)造函數(shù)]
 * @param {[string]} type [校驗類型，如reg, limit等等]
 * @param {[*]} typeVal  [根據(jù)校驗類型配置的值]
 * @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
}
//用來剔除重復(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)的校驗規(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)
  }

  //需要立即校驗的框
  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ù)

   //如果允許為空的此時為空，不校驗
   if(value === '' && option.canNull){
   vm.vaVal[name] = value
   return
   }

   vm.vaResult[name] = check(value, conditions);
   var _result = vm.vaResult[name]
   if(_result){
   //如果返回的是字符串，則為自定義報錯； 如果是數(shù)組，則使用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)   //寫在實例內(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,則有報錯
   if(_result){
   //如果返回的是字符串，則為自定義報錯； 如果是數(shù)組，則使用showErr 報錯
   typeof _result === 'string' ? layer.msgWarn(_result) : showErr(conditions[0].tag, _result)
   return
   }
   vm.vaVal[name] = value
  }
  //校驗通過的回調(diào)
  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){
   //如果返回的是字符串，則為自定義報錯； 如果是數(shù)組，則使用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設(shè)置自定義配置
 */
 Vue.prototype.VaConfig = VaConfig
}

module.exports = va

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

使用實例

第一個框，加了兩條指令

1.v-va:Password 這個代表使用配置表中password對應(yīng)的配置（包括非空和正則，默認(rèn)規(guī)則），同時應(yīng)用Password作為校驗成功獲取的 數(shù)據(jù)對象的key
2.tag為報錯顯示中此輸入框的名字

第二個框，為確認(rèn)框，也加了兩個指令
1.v-va:checkPassword.Password = "[{'equal':'Password'}]"
一般v-va后面的第一個字段為數(shù)據(jù)對象的key，他和正則對應(yīng)的名字有可能不同。
這個字段如果和配置表中的配置匹配，那么自然應(yīng)用配置。
如果不匹配，就要自己在后面用.的方式加配置（選項規(guī)則）。像這里的Password。

最后面還有一個 屬性值 "[{'equal':'Password'}]"（自定義規(guī)則）。
這個地方用了數(shù)組，即會按這個數(shù)組的配置來進(jìn)行校驗。
同時這個數(shù)組有順序，順序代表規(guī)則的優(yōu)先級。
這個配置代表，這個框必須和上面那個Password的框值相等，否則報錯。
另外確認(rèn)框不加入最后的結(jié)果數(shù)據(jù)對象。

2.tag 用來作為報錯信息的名字

校驗觸發(fā)按鈕 上面有一個指令 v-va-check
1.用來觸發(fā)校驗
2.校驗成功后，將數(shù)據(jù)對象存在實例的vaVal屬性下

根據(jù)上面的實例

規(guī)則的優(yōu)先級：
1.自定義規(guī)則 > 選項規(guī)則 > 默認(rèn)規(guī)則
2.規(guī)則中的優(yōu)先級依照數(shù)組順序

另外，可以看到為了使用者方便，我在我們團(tuán)隊中事先做了一些約定，并可能會用到 v-va、v-va-check、tag等指令，占用了實例的兩個屬性名vaConfig、vaVal。這些約定和設(shè)置可以使使用者使用方便（通過配置控制校驗時機(jī)， 校驗成功后自然生成通過的數(shù)據(jù)對象，自定義報錯信息等等）。但是也減少了這個插件的普適性。

此方案僅提供各位做思路參考。個人認(rèn)為，表單驗證是高度定制化的需求，盡量根據(jù)各個業(yè)務(wù)情況進(jìn)行取舍。在我的方案中，并不像vue-validator一樣做了臟校驗。

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