vue怎么實(shí)現(xiàn)表單校驗(yàn)

這篇文章主要為大家展示了“vue怎么實(shí)現(xiàn)表單校驗(yàn)”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“vue怎么實(shí)現(xiàn)表單校驗(yàn)”這篇文章吧。

一、安裝并使用

首先，在你的vue項(xiàng)目中進(jìn)行安裝：

npm install --save vue-input-check

安裝完成以后引入并注冊(cè)：

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就是我們對(duì)每個(gè)輸入框定義規(guī)則的地方，值是一個(gè)數(shù)組，第一個(gè)值就是輸入框的v-model，第二個(gè)值是一個(gè)字符串，語(yǔ)法如下：

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

不同的規(guī)則使用|分割，需要傳遞參數(shù)的規(guī)則的參數(shù)通過:分割。我們來看幾個(gè)例子：

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

目前可選的內(nèi)置規(guī)則如下：

    required:boolean:表示必輸，有一個(gè)可選參數(shù)，表示是否必輸，默認(rèn)true
    maxLength:num:最大長(zhǎng)度
    minLength:num:最小長(zhǎng)度
    regexp:str:正則表達(dá)式

二、獲取校驗(yàn)結(jié)果

頁(yè)面的規(guī)則定義好了以后，你有兩中方式獲取校驗(yàn)的結(jié)果。

1.JS的方式

直接使用下列方法啟動(dòng)檢查即可：

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

此對(duì)象包含三個(gè)參數(shù)：

•     formnode：需要校驗(yàn)的表單結(jié)點(diǎn)，必輸

•     callback：表單合法回調(diào)，可選

•     errorback：表單非法回調(diào)，可選
  

此外，錯(cuò)誤回調(diào)有一個(gè)形參，數(shù)據(jù)格式為：

{
    "$el":錯(cuò)誤的輸入框結(jié)點(diǎn)
    "$error":當(dāng)前輸入框的第一個(gè)錯(cuò)誤提示信息
}

2.HTML的方式

提供這種方式的目的是為了可以在頁(yè)面實(shí)時(shí)反饋當(dāng)前表單的輸入情況。

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

同樣的，添加指令v-input-check的地方同樣可以這樣判斷該處是否合法，而對(duì)于更具體的錯(cuò)誤細(xì)節(jié)，比如必輸非法，class就會(huì)像這樣v-invalid-required v-invalid。

三、自定義校驗(yàn)規(guī)則

在大部分情況下，我們還可能需要添加新的校驗(yàn)規(guī)則，畢竟默認(rèn)的往往不足以滿足所有業(yè)務(wù)情況：

Vue.use(inputCheck, {

    // 自定義校驗(yàn)規(guī)則
    validate: [{

        // 規(guī)則的名稱
        name: "XXX",

        // 校驗(yàn)方法，返回true表示合法，false表示非法
        // 需要注意的是，這個(gè)函數(shù)除了el和val一定存在外，余下的參數(shù)是使用的時(shí)候通過```:```分割傳遞的，可以有任意多個(gè)
        // 比如：``` required:true|phone:parm1:param2 ```
        test: function (el, val, ...) {
            return true|false;
        },

        // 非法提示信息，應(yīng)該返回一個(gè)字符串
        message: function (el, name) {
            return "XXX";
        }
    },
    // 校驗(yàn)規(guī)則可以有多條
    ......
    ]

});

以上是“vue怎么實(shí)現(xiàn)表單校驗(yàn)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！