vee-validate 总结

一、安装

npm install vee-validate@"<3.0.0" --save

二、引用

import Vue from 'vue';
import VeeValidate from 'vee-validate';

Vue.use(VeeValidate);

三、config配置信息

插件的一些功能可以自定义，需要编写config，然后Vue.use(VeeValidate, config)来使用

• errorBagName： 'errors'

所有的错误信息都是放在这个里面的，如果名称和页面上的变量名字冲突，需要修改成其他的，当是errors.fist的时候，error就是字符串，当使用error.all()/error.collect()的时候就是数组。

• fieldsBagName: 'fields' 

字段的名称（标志）的对象，将在每个Vue的实例数据注入。如果在页面上使用了ip的验证，那么，可以通过如下获取一个对象: 

• this.fileds.ip >> 获取到的对象： { dirty :true invalid:false pending:false pristine:false required:true touched:true untouched:false valid:true validated:true }

• locale： 'zh_CN'

验证消息的默认语言。

• strict: true

表示没有设置规则的表单不进行验证。

• events: 'blur|input'

默认是input|blur 就是在用户输入和表单失去焦点的时候都进行验证，blur表示失去焦点的时候进行验证。

四、内置的校验规则

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格式化日期
decimal:{decimals?} - 数字，而且是decimals进制
digits:{length} - 长度为length的数字
dimensions:{width},{height} - 符合宽高规定的图片
email - 不解释
ext:[extensions] - 后缀名
image - 图片
in:[list] - 包含在数组list内的值
ip - ipv4地址
max:{length} - 最大长度为length的字符
mimes:[list] - 文件类型
min - max相反
mot_in - in相反
numeric - 只允许数字
regex:{pattern} - 值必须符合正则pattern
required - 不解释
size:{kb} - 文件大小不超过
url:{domain?} - (指定域名的)url

 五、关于errors

errors是组件内置的一个数据模型，用来存储和处理错误信息，可以调用以下方法：

errors.first('field') - 获取关于当前field的第一个错误信息
collect('field') - 获取关于当前field的所有错误信息(list)
has('field') - 当前filed是否有错误(true/false)
all() - 当前表单所有错误(list)
any() - 当前表单是否有任何错误(true/false)
add(String field, String msg) - 添加错误
clear() - 清除错误
count() - 错误数量
remove(String field) - 清除指定filed的所有错误

六、自定义校验规则

import { Validator } from 'vee-validate';
Validator.extend('mobile', {
    messages: {
      zh_CN:field => `${field}必须是11位手机号码`,
    },
    validate: value => {
      return value.length == 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
    }
});

七、自定义多个错误提示

<template>
  <div>
    <input v-model="form.username" name="username" placeholder="请输入昵称" v-validate="'required|min:3|max:10|qq'" />
    <button @click="onSubmit"></button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: ''
      },
      // 自定义多个错误提示
      validate: {
        custom: {
          username: {
            required: () => '昵称不得为空',
            min: () => '不得小于3个字符',
            max: () => '不得大于10个字符',
          }
        },
      }
    }
  },
  mounted() {
    this.$validator.localize('zh_CN', validate);

    // 拓展的验证规则（组件内写法）
    this.$validator.extend('qq', {
      getMessage: field => 'qq手机号有误',
      validate: value => {
        return /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
      }
    })
  },
  methods: {
    // 当用户点击按钮校验时
    onSubmit() {
      this.$validator.validate().then((valid) => {
        console.log(valid);  //true验证通过
        console.log(this.errors);
        console.log(this.errors.items[0].msg); //在弹出层中要显示的第一个错误
      })
    }
  }
}
</script>

 八、拓展

    this.$validator.validateAll();  // 表单整体校验
    this.$validator.validate('field'); // 校验单个字段
    this.$validator.errors.clear(); // 清除错误

九、适应ui框架 

虽然vant没有内置验证框架，但提供了错误的样式。

<van-field label="姓名" :error="errors.has('Name')" :error-message="errors.first('Name')" v-model="formInfo.Name" name="Name" v-validate="'required|max:5'" data-vv-as="姓名" />

• error：是否将输入内容标红
• error-message：底部错误提示文案，为空时不展示

分组验证

<van-field name="title" data-vv-scope="group-1" v-validate="'required|max:20'" :error="errors.has('group-1.title')" :error-message="errors.first('group-1.title')" />

this.$validator.validateall('group-1').then((result) => {
 if(result){
  // ...
 }
})