veevalidate的使用3.X版本

一，基本概述

它的作用是创建表单的校验规则。
网上大部分都是2.x版本的内容，但是veevalidate在3.0的时候进行了一次大版本的更新，有了很大的不同，官网文档是英文的，感兴趣的小伙伴们也可以去直接观看哈，现在适配vue3.0的第四个版本都出了。但是我感觉3.x还是比较适合大部分项目需求的。
官网地址：
https://vee-validate.logaretm.com/v3/guide/basics.html#registering-the-validation-provider

二，安装

npm install vee-validate --save

三，基本使用讲解

这个官网中更详细，我只是把我会用到的简单描述一下，方便我自己使用哈。

1，基本概述及新增自定义规则

2，引入默认配置好的规则

这个插件默认配置了大量的规则，但是为了使插件轻量化，默认情况下全部都没有安装，也就是说，我们想要使用时，要么按需安装，要么全部引入（就类似于element ui组件的使用）
先讲按需引入：

import { ValidationProvider, extend } from 'vee-validate'
import { required } from 'vee-validate/dist/rules'
extend('required', {
  ...required,
  message: '请输入用户名'
})

注意到这个extend接收的第二个参数变成了对象，对象中的第一个参数就是之前的校验规则函数，第二个则是报错时的error信息（它会被push进errors数组中）
官网的案例如下：

import { extend } from 'vee-validate';
import { required, email } from 'vee-validate/dist/rules';

// No message specified.
extend('email', email);

// Override the default message.
extend('required', {
  ...required,
  message: 'This field is required'
});

使用：

<ValidationProvider name="email" rules="required|email" v-slot="{ errors }">
  <input v-model="email" type="text">
  <span>{{ errors[0] }}</span>
</ValidationProvider>

3，自定义规则的自定义错误信息的写法

由上可以知道，我之前自定义校验规则，extent函数的第二个参数，仅仅是校验规则函数，而没有自定义报错信息，所产生的报错将会是：

就可以改写成这样：

import { ValidationProvider, extend } from 'vee-validate'
import { required } from 'vee-validate/dist/rules'
extend('required', {
  ...required,
  message: '请输入用户名'
})
extend('myself', {
  validate: value => {
    return value >= 6
  },
  message: '请输入大于等于6的数'
})

对象内部的校验函数的属性命名必须是validate

4,全部引入校验规则

import { extend } from 'vee-validate';
import * as rules from 'vee-validate/dist/rules';
import { messages } from 'vee-validate/dist/locale/en.json';

Object.keys(rules).forEach(rule => {
  extend(rule, {
    ...rules[rule], // copies rule configuration
    message: messages[rule] // assign message
  });
});

至于所有的规则：
https://vee-validate.logaretm.com/v3/guide/rules.html#rules

但是，这种写法是英文的报错

需要改写成中文：

import { ValidationProvider, extend } from 'vee-validate'
import * as rules from 'vee-validate/dist/rules'
import zh from 'vee-validate/dist/locale/zh_CN'

Object.keys(rules).forEach(rule => {
  extend(rule, {
    ...rules[rule],
    message: zh.messages[rule]
  })
})

同时，在这里加个name属性，就可以让它知道是哪个：

于是报错变成：