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()方法来动态设置校验结果