[插件]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;

// .......