前言
前段時間，老大搭好了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表單驗證插件。下面介紹下思路。
一、表單驗證模塊的構成
任何表單驗證模塊都是由 配置——校驗——報錯——取值 這幾部分構成的。
配置： 配置規則 和配置報錯，以及優先級
校驗： 有在 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文檔翻到了這里
版權所有:易賢網
公眾號
事業單位
當前位置：
公考類
招聘類
各類考試