vee-validate 表单验证插件 的基本使用【个人目标：学会使用即可】

使用步骤：

1：安装vee-valadite，别安装最新版本@2

2：在plugins文件夹中创建一个validate.js[专门注册vee-valadite]

3:   注册插件

4：注册插件的时候，用中文，以及需要验证的字段【用中文显示提示形式】

5：在入口文件需要引入执行一次

6:   使用vee-valadiate插件

 

vee-validate 基本使用

 

// 第一步：插件安装与引入
cnpm i vee-validate@2 --save  // 安装的插件安装2版本的

import VeeValidate from 'vee-validate'
import zh_CN from 'vee-validate/dist/locale/zh_CN'   // 引入中文 message

Vue.use(VeeValidate)

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

// 第三步：基本使用
<input
      placeholder="请输入你的手机号"
      v-model="phone"
      name="phone"
      v-validate="{ required: true, regex: /^1\d{10}$/ }"
      :class="{ invalid: errors.has('phone') }"
/>
<span class="error-msg">{{ errors.first("phone") }}</span>

const success = await this.$validator.validateAll(); //全部表单验证
//自定义校验规则
//定义协议必须打勾同意
VeeValidate.Validator.extend('agree', {
    validate: value => {return value},
    getMessage: field => field + '必须同意'
})