本教程主要讲解 VeeValidate 的用法，希望通过写这篇文章可以对自己和读者带来方便
创建项目
这里直接使用了 vue 的脚手架 vue cli 创建项目，具体方法参考官网vue cli 创建项目
基础知识
基本用法
注册 ValidationProvider
有两种注册方法：第一种可以是直接在组件中使用 ValidationProvider 组件（推荐用法）
import { ValidationProvider } from 'vee-validate';
export default {
components: {
ValidationProvider
}
};
第二种方法是直接进行全局注册，这样单个组件中就不需要重复注册，当然实际业务中应该不会经常用到表格校验。
import { ValidationProvider } from 'vee-validate';
Vue.component('ValidationProvider', ValidationProvider);
在组件模版中使用 ValidationProvider
<ValidationProvider v-slot="{ errors }">
<input v-model="value" type="text">
<span>{{ errors[0] }}</span>
</ValidationProvider>
- ValidationProvider：将 input 标签和 span 标签里面的内容包裹起来
- v-model：ValidationProvider 通过该属性可以搜索到需要验证的值
- v-slot：ValidationProvider 通过该属性将信息传递出来。
增加规则
import { extend } from 'vee-validate'
extend('minmax', {
validate (value, { min, max }) {
return value.length >= min && value.length <= max;
},
params: ['min', 'max']
})
- extend：可以定义规则的名称（minmax）和 validate 函数, params 属性，如果有需要可以定义多个规则
- validate: 可以定义具体的验证方法，其中 value 对应表格中输入的值，{min,max} 对应 params 数组中的取值
- params: 定义 validate 函数中使用到的参数
<ValidationProvider rules="minmax:2,8" v-slot="{ errors }">
<input v-model="email" name="test" type="text" />
<span>{{ errors[0] }}</span>
</ValidationProvider>
-
rules 参数直接使用前面定义的 minmax 规则，后面还传入了两个参数，2和8；如果使用了多个规则，规则名称之间可以使用“｜”符号隔开
错误状态1.png
错误状态2.png
正确状态.png
- 输入框的值不符合定义的规则，右侧会出现提示信息。如图所示，当输入框的内容长度小于2或者大于8的时候，右侧出现提示信息“test is not valid”。其中“test”是 input 输入框中定义的 name
- 输入框的值符合定义的规则，右侧没有提示信息。如图所示，当输入框的内容长度大于等于2并且小于等于8的时候，右侧没有出现提示信息。
增加信息
前面长度不符合规则的默认提示显然不够友好。为了自定义提示信息，可以在 extend 函数中增加 message 属性
import { extend } from 'vee-validate'
extend('minmax', {
validate (value, { min, max }) {
return value.length >= min && value.length <= max;
},
params: ['min', 'max'],
message:'The length of {_field_} must be between {min} and {max}'
})
-
message: 定义不符合规则的情况下，出现的提示信息。其中 {_field_}对应ValidationProvider 中使用的 name，如果没有定义这个 name，会自动去找 html 中的 name 或者 id 属性，前面的报错信息正是使用到了 input 中 name 的属性值 test；另外，{min} 和 {max} 对应 params 属性的值。
截屏2020-02-26上午12.34.06.png 输入框的内容不符合规则要求的时候，会出现提示信息： The length of test must be between 2 and 8
可用的规则
除了自定义规则，VeeValidate 也自带了很多规则，详细内容可参考官方文档的详细规则，下面例举其中一个规则的使用方法
import { extend } from 'vee-validate'
import { min } from 'vee-validate/dist/rules'
extend('min',min)
- 通过 extend 函数引用自带规则 min
<ValidationProvider name="email" rules="min:4" v-slot="{ errors,classes }">
<div class="control" :class="classes">
<input v-model="email" name="test" type="text" />
<span>{{ errors[0] }}</span>
</div>
</ValidationProvider>
- rules: ValidationProvider 的 rules 属性就可以直接设置输入的值要大于等于4
