前言

前段時(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我真的覺得長(zhǎng), 動(dòng)不動(dòng)就v-validate:username="['required']"，這么一長(zhǎng)串，而我設(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)先級(jí)

校驗(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)用

下面是我老大針對(duì)公司項(xiàng)目給我提出的要求

集中式的管理 校驗(yàn)規(guī)則 和 報(bào)錯(cuò)模板。

報(bào)錯(cuò)時(shí)機(jī)可選

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

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

按順序來校驗(yàn)，在第一個(gè)報(bào)錯(cuò)的框彈出錯(cuò)誤

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

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

pc和移動(dòng)的流程不一樣，pc很多校驗(yàn)都要在change事件或者input事件就校驗(yàn)并報(bào)錯(cuò)了，而移動(dòng)則一般是要到提交按鈕再進(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è)對(duì)象里。這樣ajax的時(shí)候，就不用再去取值了。你這個(gè)插件耶要達(dá)到這個(gè)效果

原來jq的那個(gè)公用腳本，正則和報(bào)錯(cuò)都集中到一個(gè)地方去了，在很多地方已經(jīng)很方便了。但是在一些頁(yè)面需要改東西的時(shí)候還不夠靈活。像RealName這個(gè)規(guī)則，最早是針對(duì)某個(gè)頁(yè)面配置的，用的是后端接口上的字段名。另一個(gè)支付頁(yè)，后端接口上的字段名改成了PayUser了，但是正則還是RealName的，原來我們是要復(fù)寫一下RealName。這個(gè)就不太方便也不好看了。另外一個(gè)，支付金額，有最大值和最小值的限制，這個(gè)需要從后端獲取的。你也要考慮這個(gè)情況。要做到各個(gè)頁(yè)面上也能有一些靈活的地方可以修改規(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文檔翻到了這里

Vue表單驗(yàn)證插件的制作過程