[Vue]vee-validate的使用——自定義校驗規則及校驗message

 

1.安裝vee-validate

 

npm install vee-validate --save

 

2.main.js里引用vee-validate插件

 

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

Vue.use(VeeValidate);
new Vue({
  ...
}).$mount('#app')

 

3.自定義校驗規則，包含格式為[1~9999]的正則表達式

 

this.$validator.extend('customReg', {
      validate: value => {
        return /[1-9]\d*/.test(value)
      },
    })

 

4.自定義違反校驗規則時提示的error messages

 

mounted() {
    //this.$validator為Validator的實例方法 this.$validator.localize("en", {
      custom: {
        //numberBest需與組件的name屬性值保持一致
        numberBest: {
          customReg: "error number",
          between:"error between",
        },
      },
    })
  }

（定義規則可參照官方文檔：https://baianat.github.io/vee-validate/guide/messages.html#field-names）

 

5.組件中使用

 

<input v-validate="'customReg|between:1,999'" name="numberBest">