VeeValidate 教程

本教程主要讲解 VeeValidate 的用法，希望通过写这篇文章可以对自己和读者带来方便

创建项目

这里直接使用了 vue 的脚手架 vue cli 创建项目，具体方法参考官网vue cli 创建项目

基础知识

基本用法

注册 ValidationProvider

有两种注册方法：第一种可以是直接在组件中使用 ValidationProvider 组件（推荐用法）

import { ValidationProvider } from 'vee-validate';

export default {
  components: {
    ValidationProvider
  }
};

第二种方法是直接进行全局注册，这样单个组件中就不需要重复注册，当然实际业务中应该不会经常用到表格校验。

import { ValidationProvider } from 'vee-validate';

Vue.component('ValidationProvider', ValidationProvider);

在组件模版中使用 ValidationProvider

  
  {{ errors[0] }}

• ValidationProvider：将 input 标签和 span 标签里面的内容包裹起来
• v-model：ValidationProvider 通过该属性可以搜索到需要验证的值
• v-slot：ValidationProvider 通过该属性将信息传递出来。

增加规则

import { extend } from 'vee-validate'

extend('minmax', {
    validate (value, { min, max }) {
        return value.length >= min && value.length <= max;
    },
    params: ['min', 'max']
})

• extend：可以定义规则的名称（minmax）和 validate 函数, params 属性，如果有需要可以定义多个规则
• validate: 可以定义具体的验证方法，其中 value 对应表格中输入的值，{min,max} 对应 params 数组中的取值
• params: 定义 validate 函数中使用到的参数

      
      {{ errors[0] }}
 

• rules 参数直接使用前面定义的 minmax 规则，后面还传入了两个参数，2和8；如果使用了多个规则，规则名称之间可以使用“｜”符号隔开

  
  
  错误状态1.png

错误状态2.png

正确状态.png

• 输入框的值不符合定义的规则，右侧会出现提示信息。如图所示，当输入框的内容长度小于2或者大于8的时候，右侧出现提示信息“test is not valid”。其中“test”是 input 输入框中定义的 name
• 输入框的值符合定义的规则，右侧没有提示信息。如图所示，当输入框的内容长度大于等于2并且小于等于8的时候，右侧没有出现提示信息。

增加信息
前面长度不符合规则的默认提示显然不够友好。为了自定义提示信息，可以在 extend 函数中增加 message 属性

import { extend } from 'vee-validate'

extend('minmax', {
    validate (value, { min, max }) {
        return value.length >= min && value.length <= max;
    },
    params: ['min', 'max'],
    message:'The length of {_field_} must be between {min} and {max}'
})

• message: 定义不符合规则的情况下，出现的提示信息。其中 {_field_}对应ValidationProvider 中使用的 name，如果没有定义这个 name，会自动去找 html 中的 name 或者 id 属性，前面的报错信息正是使用到了 input 中 name 的属性值 test；另外，{min} 和 {max} 对应 params 属性的值。

  
  
  截屏2020-02-26上午12.34.06.png

• 输入框的内容不符合规则要求的时候，会出现提示信息： The length of test must be between 2 and 8

可用的规则

除了自定义规则，VeeValidate 也自带了很多规则，详细内容可参考官方文档的详细规则，下面例举其中一个规则的使用方法

import { extend } from 'vee-validate'
import { min } from 'vee-validate/dist/rules'

extend('min',min)

• 通过 extend 函数引用自带规则 min

 
      

        
        {{ errors[0] }}
      

• rules: ValidationProvider 的 rules 属性就可以直接设置输入的值要大于等于4