[插件]vee-validate

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;

// .......
发表评论 / Comment

用心评论~