vue使用vee-validate进行数据校验

[官网] (https://baianat.github.io/vee-validate/guide/getting-started.html#installation)

一、基本配置

1、插件引入

[具体配置地址]（https://baianat.github.io/vee-validate/configuration.html#installation）
(1)第一种引入方式

（2）第二种引入方式

//引入验证插件
import zh_CN from 'vee-validate/dist/locale/zh_CN';
import validate from 'vee-validate';
import VueI18n from 'vue-i18n'

//汉化
Vue.use(VueI18n);
const i18n = new VueI18n({
    locale:'en'
});

Vue.use(validate,{
    i18n,
    i18nRootKey:'validation',
    dictionary:{
        en:zh_CN
    },

    //验证事件
    //events:''
});

2、校验语法

（1）使用v-validate指令，必须有name属性，用于生成错误消息
（2）验证表达式是由管道分隔的一系列验证器的字符串，即：使用“|”分隔

句法一：

//单个校验
const single = 'required';
//多重校验
const multiple = 'required|numeric'

句法二：

//单个校验
const single = {required:true};
//多重校验
const multiple = {
        required:true,
        numeric:true,
        email:true
}

页面代码

{{ errors.first('email') }}

3、 自定义校验规则

[官方自定义校验] https://baianat.github.io/vee-validate/guide/custom-rules.html#require-like-rules

二、组件全局校验

1、校验事件

(1) 全局校验事件（默认：change）

Vue.use(VeeValidate, {
  events: 'change|blur|xxx'
});

(2) 为某个标签单独添加校验事件 data-vv-validate-on

2、单个组件校验

3、子父组件校验

（1）需要在子组件中需要校验的标签上面添加作用域 data-vv-scope

（2）父组件中添加方法触发全局验证

export default {
  // ...
  methods: {
    onSubmit () {
      this.$validator.validate().then(valid => {
        if (!valid) {
          // do stuff if not valid.
        }
      });
    }
  }
  // ...
}

eg:

methods: {
    // 提交
    subReport: function (status) {
            //validate('validArea.*'): validArea 对应子组件中的 data-vv-scope属性的值
            this.$validator.validate('validArea.*').then((result) => {
                if (!result) {
                    // 如果无效，做一些提示
                    this.$layer.alert("您填写的内容有 " + this.errors.items.length + " 处错误，请按要求填写正确内容！！！！");
                } else {                   
                    this.$fetch.add(params)).catch(res => {                           
                        if (status == 'commit') {
                                  //返回上一级
                                  history.back(-1);
                                } else {
                                  //加载当前页面
                                    location.reload();
                                }
                            
                        }
                    );
                }
            });
    },
}

三、错误消息

1、配置

默认情况下，每个字段只生成一条消息,因为它在运行验证管道时使用快速退出策略。当检测到第一个失败规则时，它的消息将生成并存储在错误包实例中，然后忽略其他规则结果。若要禁用此行为，可能需要配置fastExit或者使用continues

2、某一字段错误消息

(1) errors.first('fieldName')

{{ errors.firsts('fieldName') }}

（2）errors.collect('fieldName')

  
{{ error }}

3、所有字段错误消息

(1) errors.all()

  
{{ error }}

(2) 按字段名分组 errors.collect()

  

    

      
{{ error }}