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

使用步骤： 1：安装vee-valadite，别安装最新版本@2 2：在plugins文件夹中创建一个validate.js[专门注册vee-valadite] 3:   注册插件 4：注册插件的时候，用中文，以及需要验证的字段【用中文显示提示形式】 5：在入口文件需要引入执行一次 6:   使用vee-valadiate插件   vee-validate 基本使用

 1 第一步：插件安装与引入
 2 cnpm i vee-validate@2 --save  安装的插件安装2版本的
 3 
 4 import VeeValidate from 'vee-validate'
 5 import zh_CN from 'vee-validate/dist/locale/zh_CN'   // 引入中文 message
 6 Vue.use(VeeValidate)
 7 
 8 第二步：提示信息
 9 VeeValidate.Validator.localize('zh_CN', {
10 messages: {
11 ...zh_CN.messages,
12 is: (field) => `${field}必须与密码相同` // 修改内置规则的 message，让确认密码和密码相同
13 },
14 attributes: { // 给校验的 field 属性名映射中文名称
15 phone: '手机号',
16 code: '验证码',
17 password:'密码',
18 password1:'确认密码',
19 isCheck:'协议'
20 }
21 })
22 
23 第三步：基本使用
24 <input
25           placeholder="请输入你的手机号"
26           v-model="phone"
27           name="phone"
28           v-validate="{ required: true, regex: /^1\d{10}$/ }"
29           :class="{ invalid: errors.has('phone') }"
30         />
31 {{ errors.first("phone") }}
32 
33 const success = await this.$validator.validateAll(); //全部表单验证
34 //自定义校验规则
35 //定义协议必须打勾同意
36 VeeValidate.Validator.extend('agree', {
37 validate: value => {
38 return value
39 },
40 getMessage: field => field + '必须同意'
41 })