基於vue.js 2.0表單驗證vuelidate插件介紹及使用

官網：https://vuelidate.netlify.com/
Github：https://github.com/monterail/...

具體的安裝方法和項目引入使用就不說了，官網說的很清楚。下面直接上例子

1、簡單介紹

先簡單看下main.js 作了什麼

測試用的頁面：test-page.vue

一、$v values 屬性和值

刷新頁面，在瀏覽器上能夠看到以下結果

$v 經常使用的屬性和值：
required -- 須要非空數據，false-輸入框現爲空值，true-輸入框現爲非空值
$model -- this.$v.name.$model至關於this.name，至關於v-model的值
$invalid -- 驗證狀態，true-驗證不經過，false-驗證經過
$dirty -- 表示用戶是否至少觸摸了一次驗證字段。用$touch和$reset管理此標識
$error – 用於判斷是否應顯示錯誤消息。true-顯示，false-不顯示
$error === this.$dirty && !this.$pending && this.$invalid
$pending -- 始終爲false：全部驗證器都是同步的
email – 郵箱格式驗證，false-格式錯誤，true-格式正確（包括空值）

二、$v methods 方法

$touch -- 觸發驗證，把指定的驗證器及其全部子項的$dirty置爲true
$reset -- 重置驗證，把指定的驗證器及其全部子項的$dirty置爲false
這些方法能夠在html中使用@input或@blur綁定，也能夠在js中觸發執行

三、validations 驗證配置項

注意：全部的驗證器須要與data下面的數據有對應值

四、Builtin validators 內置的驗證規則

官方自帶的驗證規則：required, between, maxLength, minLength, minValue, maxValue, alpha, alphaNum, numeric, email, ipAddress, macAddress, sameAs, url…
爲了方便vue每一個子組件的使用，在main.js作了統一引入，並掛載在vue原型的$rules上，能夠看以前的main.js代碼截圖。

2、基於vuelidate的vue組件封裝及使用

一、需求：

（1）給輸入框提供驗證規則，必填、郵箱地址、手機號、字母數字下劃線等等；
（2）當不知足其中一條規則時，給出提示，不能作後續操做（例如向後端發請求）；
（3）提示方式：若是驗證不經過，當輸入框失焦，輸入框標紅，鼠標懸浮、聚焦出現提示語；
（4）當輸入框有多條驗證規則時，只顯示第一條觸發規則的提示語；
（5）第一次輸入，當輸入框的驗證規則包含有「輸入內容限制」的規則時，好比只能輸入數字，須要即時提示（輸入過程就要提示），主動刪除內容後，提示消失。輸入框失焦後，只要觸發規則，提示語會一直跟隨。

二、封裝思路

（1）須要提供的屬性有：error—一個標識，用於判斷是否標紅輸入框，是否顯示錯誤提示語。msgList—一個json數組，當有多少條驗證規則時就有多少項；每一項包括，show：是否顯示錯誤提示的標識，text：錯誤提示語。
（2）父組件調用時，可以自定義須要驗證的內容，能夠是輸入框、選擇框等等。（利用slot）
（3）錯誤提示語能夠根據輸入框（選擇框）的高度，自動跟隨提示在下方。

tip-msg.vue組件

關鍵的技術點已經用紅框標出。

三、基本使用方法

由於在不少模塊都會使用表單驗證，因此在main.js全局引入並註冊

test-page.vue

四、自定義驗證規則

除了官方自帶的驗證規則，咱們還能夠根據實際業務需求自定義驗證規則。
vuelidate-rule.js

帶參數的自定義規則：

注意，當驗證的字段是非必填時，即沒有required時，要加上 !helpers.req(value) 這個req幫助器。能夠參考GitHub上的官網源碼：

main.js

test-page.vue

五、Config keywords 配置關鍵字（介紹$each的用法）

六、$each 配合 $iter 用法

這裏須要注意的一點，使用了$iter以後，index變成了string，若是要變回number可使index-0

七、requiredIf用法

官方說明：requiredIf-僅當提供的屬性或謂詞爲true時才須要非空數據。
仍是直接上例子更直白：

直接點擊提交，驗證經過

輸入ip以後點擊提交，驗證不經過

以上，就是使用vuelidate插件作表單驗證開發中經常使用到的功能，還有更多強大的功能等着各位去發現，加油吧少年！文中若有不正確的地方歡迎指出~