1. 程式人生 > >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表單驗證外掛。下面介紹下思路。

一、表單驗證模組的構成

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

  1. 配置: 配置規則 和配置報錯,以及優先順序

  2. 校驗: 有在 change 事件校驗, 在點選提交按鈕的時候校驗, 當然也有在input事件取值的

  3. 報錯: 報錯方式一般要分,報錯的文字有模板,也有自定義的

  4. 取值: 將通過驗證的資料返還給開發者呼叫

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

  1. 集中式的管理 校驗規則 和 報錯模板。

  2. 報錯時機可選

  3. 校驗正確後的資料,已經打包成物件,可以直接用

  4. 允許各個頁面對規則進行覆蓋,對報錯資訊進行自定義修改,以及允許ajax獲取資料後,再對規則進行補充

  5. 按順序來校驗,在第一個報錯的框彈出錯誤

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

  1. 集中式管理規則,和報錯模板的好處,就是規則可以全域性通用,一改全改。老大跟我說,光是暱稱的正則就改了三次。如果這些正則寫在各個頁面,o( ̄ヘ ̄o#)哼,你就要改N個頁面了

  2. pc和移動的流程不一樣,pc很多校驗都要在change事件或者input事件就校驗並報錯了,而移動則一般是要到提交按鈕再進行校驗。所以寫外掛的時候要做好兩手準備。然後,報錯用的ui要可以支援我們現在用的layer外掛。當然以後這個報錯的ui也可能變,所以你懂滴。

  3. 當然原來jq時代,我們的公用表單驗證,就能驗證完了,把資料都集合到一個物件裡。這樣ajax的時候,就不用再去取值了。你這個外掛耶要達到這個效果

  4. 原來jq的那個公用指令碼,正則和報錯都集中到一個地方去了,在很多地方已經很方便了。但是在一些頁面需要改東西的時候還不夠靈活。像RealName這個規則,最早是針對某個頁面配置的,用的是後端介面上的欄位名。另一個支付頁,後端介面上的欄位名改成了PayUser了,但是正則還是RealName的,原來我們是要複寫一下RealName。這個就不太方便也不好看了。另外一個,支付金額,有最大值和最小值的限制,這個需要從後端獲取的。你也要考慮這個情況。要做到各個頁面上也能有一些靈活的地方可以修改規則,自定義報錯等等。

  5. 為什麼要按順序校驗啊?你忘了上次牛哥讓我們輸入框,從上到下,按順序報錯。不然使用者都不知道哪個地方錯了。還有規則也是要按順序的。哦哦哦。看來這次我放東西的時候,要用下陣列了。儘量保持順序。

我聽了之後,大致懂了,原來之前自己寫的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
}
  1. type: nonvoid(非空), reg(正則), limit(區間), equal(與某個input相等),unique(不能相同)

  2. typeVal: 根據不同type設定不同的值

  3. errMsg: 自定義的報錯資訊

  4. name: 用來傳ajax的欄位,如Password, Username

  5. 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: /^[\[email protected]#$%^&*.]{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一樣做了髒校驗。