自定义配置文件(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()
}