VeeValidate_2x配合Vue2的使用

1.安装模块

npm i vee-validate@2 --save

2.引入模块,在VUE中使用

import Vue from 'vue'
import veeValidate from 'vee-validate' 
Vue.use(veeValidate);

3.template模板中使用

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

<!--  参数详细说明 --> 
<!--   1.name='phone'           当前插件指定的名称 -->
<!--   2.v-validate             确定校验规则 -->
<!--   3.v-module ='phone'      确定校验绑定数据 -->
<!--   4.invalid                由插件提供的一个类名-->
<!--   5.errors.has('phone')    调用了has方法来判断错误对象中是否有"phone"这个字段 -->
<!--   6.errors.first('phone')  调用 first 方法显示当前的错误信息-->

4.正则的校验规则 v-validate 对象

/**
  required                    - 必传参数 
  regex:{pattern}             - 值必须符合正则pattern 
  is:{data}                   - 值必须与data数据相同
  after{target}               - 比target要大的一个合法日期，格式(DD/MM/YYYY) 
  alpha                       - 只包含英文字符 
  alpha_dash                  - 可以包含英文、数字、下划线、破折号 
  alpha_num                   - 可以包含英文和数字 
  before:{target}             - 和after相反 
  between:{min},{max}         - 在min和max之间的数字 
  confirmed:{target}          - 必须和target一样 
  date_between:{min,max}      - 日期在min和max之间 
  date_format:{format}        - 合法的format格式化日期，格式(yyyy-MM-dd) 
  decimal:{decimals?}         - 数字，而且是decimals进制 
  digits:{length}             - 长度为length的数字 
  dimensions:{width},{height} - 符合宽高规定的图片 
  email                       - 邮箱
  ext:[extensions]            - 后缀名 
  image                       - 图片 
  in:[list]                   - 包含在数组list内的值 
  ip                          - ipv4地址 
  max:{length}                - 最大长度为length的字符 
  mimes:[list]                - 文件类型 
  min:{length}                - max相反 
  mot_in                      - in相反 
  numeric                     - 只允许数字 
  size:{kb}                   - 文件大小不超过 
  url:{domain?}               - (指定域名的)url
*/

5.安装汉化和重写变量名

        1.引入汉化包,安装汉化

import zh_CN from 'vee-validate/dist/locale/zh_CN' 
veeValidate.Validator.localize('zh_CN',{})

        2.重写汉化的is规则

veeValidate.Validator.localize('zh_CN',{
    messages: {
        ...zh_CN.messages,
        is:(field)=>`${field}必须与密码相同`
    }
})

        3.给name对应的变量增加中文名

veeValidate.Validator.localize('zh_CN',{
    messages: {...},
    attributes:{
        phone:'手机号',
        code:'验证码',
        password:'密码',
        password1:'重复密码',
        isAgree:'协议',
    }
})

6.提交表单时的整体验证

async submit() {
    // 单独校验  在输入内容的时候直接就开始校验
    // 整体验证  在点击完成注册的是由对所有的表单项进行验证
    const success = await this.$validator.validateAll();
    // 对所有表单项进行验证,验证通过返回true
    if (!success) {
        return
    }
}