vue表单验证插件vee-validate

1. 说明

1). vee-validate是专门用来做表单验证的vue插件
2). github地址: https://github.com/baianat/vee-validate
3). 学习于：https://www.bilibili.com/video/BV1WJ411678K?p=25

2. 使用

1). 引入

下载: npm install vee-validate@2.2.9 --save
在项目根目录新建validate.js文件后引入插件:
    import Vue from 'vue'
    import VeeValidate from 'vee-validate'
    
    Vue.use(VeeValidate)
在项目主文件main.js引入validate.js文件
    import './validate'

2). 表单中基本使用

 <input v-model="email" name="myemail" v-validate="'required'"> // 校验规则
 <span style="color: red;" v-show="errors.has('myemail')">{{ errors.first('myemail') }}</span>  // 样式

 <input v-model="phone" name="phone" v-validate="'required|mobile'"> // 间接定义校验规则mobile
 <span style="color: red;" v-show="errors.has('phone')">{{ errors.first('phone') }}</span>  // 样式  
 
 <input v-model="phone" name="phone" v-validate="{required: true,regex: /^1\d{10}$/}"> // 直接定义校验规则
 <span style="color: red;" v-show="errors.has('phone')">{{ errors.first('phone') }}</span> // 规则出错显示的样式
 
 const success = await this.$validator.validateAll() // 对所有表单项进行验证
 const success = await this.$validator.validateAll(names) // 对指定的所有表单项进行验证,  names 是数组，可以对存放在表单中定义的多个 name 进行部分验证，如果需要使用，可以通过判断当前页面是密码登录还是手机登录等进行部分验证

3). 提示信息本地化

 问题: 提示文本默认都是英文的
 errors.first 将错误信息显示出来

import zh_CN from 'vee-validate/dist/locale/zh_CN'
VeeValidate.Validator.localize('zh_CN', {
  messages: zh_CN.messages,
  attributes: {
    phone: '手机号',
    code: '验证码'
  }
})

4). 自定义验证规则

import VeeValidate from 'vee-validate'
VeeValidate.Validator.extend('mobile', {
  validate: value => {
    return /^1\d{10}$/.test(value)
  },
  getMessage: field => field + '必须是11位手机号码'
})