1.安装
npm install vee-validate@2.0.0
2.引入
该插件需要使用Vue.use引入,我们可以新建一个plugin文件夹,然后在里面进行引入。
import Vue from 'vue'; import VeeValidate from 'vee-validate';
此时,我们还没使用Vue.use()进行引入,我们可以先进行配置。
const config = { errorBagName: 'errors', //为收集错误的对象起一个变量名,它存在每个组件的this中,如果和页面中的产生冲突,则可以更改这里 delay: 100, //表示获取输入信息的时间[毫秒] locale: 'zh_CN', //验证消息的默认语言,一定要将这里写成zh_CN,否则自定义验证规则返回的验证消息是英文的。 strict: true, //表示没有设置规则的表单不进行验证 events: 'input', //默认[input],input表示当输入时和表单失去焦点时都进行验证,blue表示当失去焦点时在验证。 };
然后进行引入。
Vue.use(VeeValidate, config);
3.基本使用
此时,我们只能使用vee-validate提供的内置验证规则,用法如下。
<!-- 1.我们必须为表单提供一个 name 属性,否则vee-validate不知道这个表单是哪一个。 2.需要使用 v-validate 指令,来选择验证规则,我们可以输入单个也可以输入多个,可以使用字符串也可以使用对象形式。 2.1(重要):如果使用字符串的方式,则需要在最""里面再写一个单引号将规则包住,否则会将规则名当成一个变量,第一个就是这样。 --> <input name="age" v-validate="'required'" -> 单个规则写法 v-validate="'required|between:1,120'" -> 多个规则写法,每个规则使用|管道符分隔 v-validate="{required: true, between:[1,120]}" -> 对象写法,将需要的规则置true即可,此时不需要在里面包一层单引号了,如果其中的值是多个[例如between],则将值写成数组即可。 /> <!-- 1.这里是提示错误信息的,当使用该插件后,每个组件上都拥有了一个errors的计算属性[在config中可以修改该变量名]。 2.errors是一个数组,里面存储的是错误信息,我们通过v-show来控制它是否显示,如果没有错误has()则返回一个false,那么该span就不显示。 3.如果有错误了,那么has()则会返回一个true,那么我们就通过first()方法,拿到errors数组中的第一条错误信息来展示。 4.注意(重要):在has()以及first()中,函数的参数值,都需要填写你校验关联表单的name值。 --> <span class="error-msg" v-show="errors.has('age')">{{errors.first('age')}}</span>
所有内置规则:
after{target} - 比target要大的一个合法日期,格式(DD/MM/YYYY) alpha - 只包含英文字符 alpha_dash - 可以包含英文、数字、下划线、破折号 alpha_num - 可以包含英文和数字 before:{target} - 和after相反 between:{min},{max} - 在min和max之间的数字 confirmed:{target} - 必须和target一样 date_between:{min,max} - 日期在min和max之间 date_format:{format} - 合法的format格式化日期 decimal:{decimals?} - 数字,而且是decimals进制 digits:{length} - 长度为length的数字 dimensions:{width},{height} - 符合宽高规定的图片 email - 不解释 ext:[extensions] - 后缀名 image - 图片 in:[list] - 包含在数组list内的值 ip - ipv4地址 max:{length} - 最大长度为length的字符 mimes:[list] - 文件类型 min - max相反 mot_in - in相反 numeric - 只允许数字 regex:{pattern} - 值必须符合正则pattern required - 不解释 size:{kb} - 文件大小不超过 url:{domain?} - (指定域名的)url
4.将验证消息修改为中文
我们首先将中文包引入进来,也需要将vee-validate下的Validator通过{Validator}方式引入进来。
import zh_CN from 'vee-validate/dist/locale/zh_CN'; import VeeValidate, { Validator } from 'vee-validate'; //把这个代码,将最顶部相同的代码替换掉即可。
然后创建一个对象:dict,该对象里有一个messages属性[值也是对象]。
然后使用
VeeValidate.Validator.localize(语言,dict对象)
方法进行调用即可。
var dict = { messages: { ...zh_CN.messages } }; VeeValidate.Validator.localize("zh_CN", dict);
5.修改字段名:
此时,返回的验证消息显示的是phone,我们应该将它替换成显示手机号。
我们只需要在 dict 对象中添加以下属性:
attributes[它的值也是一个对象]
。该对象中的key,就是你input中对应的name属性值。
var dict = { messages: { ...zh_CN.messages, // 在这里可以进行重写 required: (field, args)=>`${filed}是一个必填内容!` }, attributes: { phone: "手机号", code: "验证码" } };
6.自定义验证规则:
使用
Validator.extend(规则名称, 规则配置对象)
方法可以自定义验证规则。
- 在对象中,一共有两个必须定义的属性,它们都是一个函数。
- getMessage(field, args):返回的错误信息。
- field:字段名称,使用的是dict.attributes中的。
- args:在规则后携带的值。
- validate(value, args):验证规则,必须返回一个true或者false,或者是Promise实例。
- value:控件内输入的内容。
- 该函数如果返回的是true,则代表着验证通过。
- 该函数如果返回的是false,则代表不通过,那么就会执行getMessages函数,进行返回错误信息。
// 手机号验证规则 Validator.extend('mobile', { getMessage: field => `${field}格式不正确!`, validate: value => /^[1][3-9][\d]{9}$/.test(value) //test是验证正则的,通过返回true });
7.提交时验证是否通过
在我们提交表单时,应该去判断所有字段都已经验证通过了。
/* 在提交时,应该先调用该方法,如果都已经验证通过,则返回一个true,否则返回false。 */ const valiRes = await this.$validator.validateAll(); if(!valiRes) return; // .......
版权声明:《 [插件]vee-validate 》为甄雨锋原创文章,转载请注明出处!
最后编辑:2022-5-28 11:05:16