[官網] (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>