前言

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

1.我想了下，一個是表單驗證是個高度定制化的東西，這種網上找到的插件為了兼顧各個公司的需求，所以加了很多功能，這些我們不需要。事實證明，vue-validator有50kb，而我寫的va.js只有8kb。

2.另一個是，vue-validator的api我真的覺得長, 動不動就v-validate:username="['required']"，這么一長串，而我設計的調用大概如——v-va:Money

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

一、表單驗證模塊的構成

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

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

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

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

取值： 將通過驗證的數據返還給開發(fā)者調用

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

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

報錯時機可選

校驗正確后的數據，已經打包成對象，可以直接用

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

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

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

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

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

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

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

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

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

二、Vue 的插件怎么寫

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

Vue表單驗證插件的制作過程