vue-validator 使用详解

最新推荐文章于 2025-06-14 14:41:19 发布

转载最新推荐文章于 2025-06-14 14:41:19 发布 · 8.4k 阅读

Vuetify 专栏收录该内容

3 篇文章

订阅专栏

博客介绍了自定义配置文件 validateConfig 的使用，需在 main.js 中引入。在页面提交方法里引入进行校验，不通过则中断执行。对于自定义组件，数据变化时 validate 拿不到新数据，需用特定方式指定检测并基于事件触发验证，使用方法控制提示语显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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