vue-validator 使用詳解

自定義配置文件(validateConfig):

　　

import Vue from 'vue'
import VeeValidate, { Validator } from 'vee-validate'

const dictionary = {
  en: {
    messages: {
      // <input type="text" v-model="phoneNumber" name="phone" v-validate="'required|phone'">
      // 不滿足required條件時，顯示的提示對應下面的設置
      required: (field) => `${field} is necessary!`,
    },
    attributes: {
      // <input type="text" v-model="phoneNumber" name="phone" v-validate="'required|phone'">
      // 上述messages提示信息中field顯示的內容在此設置，對應標簽的name屬性
      phone: 'Phone Number',
    }
  }
}

// 引用上述設置
Validator.localize(dictionary)

// 自定義驗證規則,取名為phone, 通過該方式使用v-validate="'required|phone'"
Validator.extend('phone', {
  // 驗證規則，符合規則通過，否則不通過 (規則為美國電話號碼)
  validate: (value, ref) => {
    return /^(\d3|^\d{3}[.-]?)?\d{3}[.-]?\d{4}$/.test(value)
  },
  // 提示信息，不符合規則提示語
  // <span v-show="errors.has('phone')" class="error-message"> {{ errors.first('phone') }} </span>
  getMessage: (field) => 'The ' + field + ' is invalid.'
})

// 事件觸發規則，在輸入框中輸入后點擊事件觸發驗證，默認為實時驗證
Vue.use(VeeValidate, { events: 'blur' })

　

main.js中引入文件
 import '@/assets/js/validateConfig'

頁面使用:

    <label>Phone Number</label>
    <input type="text" v-model="phoneNumber" name="phone" v-validate="'required|phone'">
    <span v-show="errors.has('phone')" class="error-message"> {{ errors.first('phone') }} </span>

提交方法中引入，進行校驗，不通過中斷執行

update () {
  let result = await this.$validator.validateAll()
  if (!result) {
     return
  }
  ....
}

對自定義的組件(自定義select)，數據發生變化，validate拿不到新的數據，需要使用 v-validate:userId="'required|phone'"
指定檢測userId，並在觸發事件中使用 await this.$validator.validateAll()來對提示語關閉或顯示(基於事件觸發驗證情況)

eg:
        <my-select :select="users" :value="userId" @input="idChanged"
          name="userId" v-validate:userId="'required'"></my-select>
        <span v-show="errors.has('userId')" class="error-message"> {{ errors.first('userId') }} </span>

        idChanged (value) {
            this.userId = value
            this.$validator.validateAll()
        }