va.js—Vue 表單驗證外掛程式的寫作過程

前言

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

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

另一個是，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指令

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

其實我是想寫個指令來完成表單驗證的事的。結果發現可能有2-3個指令，而且要再Vue.prototype上定義些方法，好讓各子實例內部也能拓展規則。於是老大說，這就等於是插件了。這讓我很是吃鯨。

va.js主要用的是Vue指令

Vue 文件真的寫得很用心，但是我再補充一點吧
vnode.context 就是Vue的實例
我們做專案的時候，一個根組件上掛著N個子組件，子組件上又可能掛著N個子組件。 vnode.context取得的實例，是綁定指令的元件的實例。這個就相當好用了。你可以做很多事情

當然還用了點Vue.prototype

Vue.prototype.$method 就是可以在各個元件上呼叫的方法。可以在元件內部用 this.$method調用的