vue表單校驗方法

導讀	這篇文章主要介紹的是vue 如何實現表單校驗的方法，有程式碼詳細解說，感興趣的小夥伴可以參考下面文章的具體內容

首先，在你的vue專案中進行安裝：

npm install --save vue-input-check

安裝完成以後引入並註冊：

import inputCheck from 'vue-input-check';
 
// 安裝
Vue.use(inputCheck);

然後，我們就可以在表單中使用了：

<form autocomplete="off" novalidate>
    <input v-model='key' name='輸入框名稱' v-input-check='[key,"validate-express"]'/>
    <!-- 可以有任意多的輸入框 -->
</form>

如你所見，上述的v-input-check就是我們對每個輸入框定義規則的地方，值是一個陣列，第一個值就是輸入框的v-model，第二個值是一個字串，語法如下：

validate-express="val1:param1:param2|val2|valu3:param1"

不同的規則使用|分割，需要傳遞引數的規則的引數透過:分割。我們來看幾個例子：

v-input-check='[key,"required|maxLength:10|regexp:^\\d{1,5}$"]'
v-input-check='[key,"required"]'

目前可選的內建規則如下：

• required:boolean:表示必輸，有一個可選引數，表示是否必輸，預設true
• maxLength:num:最大長度
• minLength:num:最小長度
• regexp:str:正規表示式

頁面的規則定義好了以後，你有兩中方式獲取校驗的結果。

直接使用下列方法啟動檢查即可：

this.$validateCheck(formnode, callback, errorback);

此物件包含三個引數：

• formnode：需要校驗的表單結點，必輸
• callback：表單合法回撥，可選
• errorback：表單非法回撥，可選

此外，錯誤回撥有一個形參，資料格式為：

{
    "$el":錯誤的輸入框結點
    "$error":當前輸入框的第一個錯誤提示資訊
}

提供這種方式的目的是為了可以在頁面實時反饋當前表單的輸入情況。

首先，在表單上，你可以透過判斷class包含v-valid或者v-invalid來判斷表單是否合法。

同樣的，新增指令v-input-check的地方同樣可以這樣判斷該處是否合法，而對於更具體的錯誤細節，比如必輸非法，class就會像這樣v-invalid-required v-invalid。

在大部分情況下，我們還可能需要新增新的校驗規則，畢竟預設的往往不足以滿足所有業務情況：

Vue.use(inputCheck, {
 
    // 自定義校驗規則
    validate: [{
 
        // 規則的名稱
        name: "XXX",
 
        // 校驗方法，返回true表示合法，false表示非法
        // 需要注意的是，這個函式除了el和val一定存在外，餘下的引數是使用的時候透過```:```分割傳遞的，可以有任意多個
        // 比如：``` required:true|phone:parm1:param2 ```
        test: function (el, val, ...) {
            return true|false;
        },
 
        // 非法提示資訊，應該返回一個字串
        message: function (el, name) {
            return "XXX";
        }
    },
    // 校驗規則可以有多條
    ......
    ]
 
});

到此這篇關於vue 如何實現表單校驗的文章就介紹到這了

原文來自：