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

一、基本配置

1、插件引入

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

  <script src="path/to/vue.js"></script>
  <script src="path/to/vee-validate.js"></script>
  <script>
    Vue.use(VeeValidate); // good to go.
  </script>

（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
}

页面代码

<input v-validate="'required|email'" name="email" type="text">
<!--  错误消息显示 -->
<span>{{ errors.first('email') }}</span>

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

<input name="field" v-validate="'required'" data-vv-validate-on="change|custom">

2、单个组件校验

3、子父组件校验

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

 <!--循环-->
<p>
    <label v-for="(field, index) in obj.fields" :key="field.id">
        <template v-if="field.label">
            {{field.value}}
        </template>
        <template v-else>
            {{field.prefix}}
            <input type="text" :name="field.title"  v-validate="field.rules" data-vv-scope="validArea"  v-model="field.value" key="value"/>
            <span style="color: red;font-size: 1vh">{{ errors.first( field.title,'newsletter') }}</span>
            {{field.suffix}}
        </template>
    </label> 
</p>

（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("您填写的内容有<span style='color: red'> " + this.errors.items.length + " </span>处错误，请按要求填写正确内容！！！！");
                } else {                   
                    this.$fetch.add(params)).catch(res => {                           
                        if (status == 'commit') {
                                  //返回上一级
                                  history.back(-1);
                                } else {
                                  //加载当前页面
                                    location.reload();
                                }
                            
                        }
                    );
                }
            });
    },
}

三、错误消息

1、配置

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

<input type="text" name="fieldName" v-validate.continues="'required|alpha|min:5'">

2、某一字段错误消息

(1) errors.first('fieldName')

<!-- 显示第一个错误 -->
<input type="text" name="fieldName" v-validate="'required'">
<span>{{ errors.firsts('fieldName') }}</span>

（2）errors.collect('fieldName')

<!-- 显示多条错误 -->
<input type="text" name="fieldName" v-validate.continues="'required|alpha|min:5'">
<ul>
  <li v-for="error in errors.collect('fieldName')">{{ error }}</li>
</ul>

3、所有字段错误消息

(1) errors.all()

<!-- 显示多条错误消息 -->
<input type="text" name="first" v-validate.continues="'required|alpha|min:5'">
<input type="text" name="second" v-validate.continues="'required|alpha|min:5'">
<ul>
  <li v-for="error in errors.all()">{{ error }}</li>
</ul>

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

<!-- 显示第一个错误 -->
<input type="text" name="first" v-validate.continues="'required|alpha|min:5'">

<input type="text" name="second" v-validate.continues="'required|alpha|min:5'">

<ul>
  <li v-for="group in errors.collect()">
    <ul>
      <li v-for="error in group">{{ error }}</li>
    </ul>
  </li>
</ul>