vue—表單驗證教程

1.安裝vue-validator插件

npm install vue-validator

因為vue-validator是Vue.js的一個插件，所以vue-validator需要使用Vue.use(PluginContructor)(Vue.js用此方法來注冊該插件)

在main.js中注冊該插件

import Vue from 'vue'
import vueValidator from 'vue-validator'
Vue.use(vueValidator)

2.vue-validator基本語法

要校驗的表單元素包裹在validator自定義元素指令中，而要校驗的表單控件元素的v-validate屬性上綁定相應的校驗規則。驗證結果會保留在組件實例中$validation屬性下，$validation是由validator元素的name屬性和$前綴組成的。

驗證結果由兩部分組成，即表單整體校驗結果和單個字段校驗結果。

單個字段校驗結果包括以下校驗屬性：

Valid —— 字段校驗是否通過，通過返回true ，失敗返回false

invalid——valid字段取反

touched —— 校驗字段所在元素獲得過焦點時返回true,否則返回false

untouched —— touched取反

modified —— 當元素值與初始值不同時返回true ,否則返回false

dirty —— 字段值改變過至少一次返回true ，否則返回false

pristine —— dirty取反

errors —— 如果校驗沒有通過，則返回錯誤字段信息數組，否則返回undefined

表單整體校驗結果包括以下校驗屬性：

valid——所有字段校驗是否通過，通過返回true,失敗返回false

invalid——valid取反

touched——只要有一個校驗字段所在元素獲得過焦點就返回true,否則返回false

untouched——touched取反

modified——只要有一個字段對應元素值與初始值不同就返回true，否則返回false

dirty——只要有一個校驗字段對應元素值改變過至少一次就返回true，否則返回false

pristine——dirty取反

errors——如果整體校驗沒通過，則返回錯誤字段信息數組，否則返回undefined

2.1v-validate指令語法

v-validate[:field]="array literal | object literal |binding",其值可以是數組（"['required']"），對象(適合需要額外參數的校驗器），組件

校驗字段名：field

2.0以下的版本，校驗時依賴v-model指令

　　　　<validator>
            <form>
                <input type="text" v-model="comment" v-validate="minLength:23" />
            </form>
        </validator>

2.0及以上的版本，使用v-validate指令進行校驗

　　　　<validator>
            <form>
                <input type="text" v-validate:comment-msg="minLength:23" />
            </form>
        </validator>

當需要動態綁定校驗字段的名稱時，我們可以在要校驗的元素上使用field屬性

<validator>
            <form>
                <input type="text" field="{{field.name}}" v-validate="field.validate" />
            </form>
        </validator>

//js
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
    data(){
        return {
            field:{
                name:'comment',
                validate:{
                    minLength:12
                }
            }
        }
    },
}

2.2常用的內置驗證規則

required:必填校驗器，該校驗器用來校驗字段值是否不為空

pattern:正則匹配校驗器，校驗元素值是否匹配pattern所表示的正則表達式

minlength：最小長度校驗器，校驗元素的長度是否大於 minlength

manlength: 最大長度校驗器，校驗元素的長度是否小於maxlength

min:最小長度校驗器，校驗元素的值是否大於min的值

max:最大長度校驗器，校驗元素的值是否大於max的值

2.3與v-model同時使用：vue-validator會自動校驗通過v-modal動態設置的值

2.4重置校驗結果：調用  $resetValidation()方法來動態設置校驗結果