vee-validate使用

由于新版本过于复杂，对新手不友好，所以使用2开头的版本

1、安装

npm i vee-validate@2

2、引入插件

// vee-validate插件：表单验证区域
import Vue from 'vue'
import VeeValidate from 'vee-validate'
Vue.use(VeeValidate)

3、添加表单验证的提示信息

// 中文提示信息
import zh_CN from 'vee-validate/dist/locale/zh_CN'

VeeValidate.Validator.localize('zh_CN', {
  messages: {
    ...zh_CN.messages,
    is: (field) => `${field}必须与密码相同`//修改内置规则的message，让确认密码和密码相同
  },
  attributes: {//给校验的field属性名称映射中文
    phone: '手机号',
    code: '验证码',
    password: '密码',     
    password1: '确认密码',
    agree: '协议'
  }
})

4、在文本框中应用校验规则 

 其中密码的校验规则为如下

 其中勾选协议的自定义规则为

// 自定义校验规则
VeeValidate.Validator.extend('agree', {
  validate: value => {
    return value
  },
  getMessage: field => field + '必须同意'
})

5、表单验证全部通过后才能发请求（注册）

在发送请求的函数内添加如下函数

success返回一个布尔值，当返回的值为true时表示所有验证通过

 const success = await this.$validator.validateAll()

将请求嵌套在if(success)语句中即可