VeeValidate

1. 工具定位

VeeValidate 是一个专门针对 Vue.js 设计的模板驱动型表单验证框架。通过在输入标签上添加简单的 v-validate 指令，即可完成复杂的校验逻辑。

(安装依赖：npm install vee-validate)

---

2. 全局注入与汉化配置 (基于 V2 语法)

在应用入口文件（如 main.js）中进行全局配置，重点解决默认报错信息为英文以及可能的属性命名冲突问题。

import Vue from 'vue'
import VeeValidate, { Validator } from 'vee-validate'
// 导入官方中文语言包
import zh_CN from 'vee-validate/dist/locale/zh_CN'

// 1. 覆写默认的报错文案
zh_CN.messages.required = () => '该字段是必须的'
zh_CN.messages.confirmed = () => '输入数据不一致'
zh_CN.messages.email = () => '邮箱格式不正确'
zh_CN.messages.regex = () => '输入格式不正确'

// 2. 将框架挂载至 Vue 实例
Vue.use(VeeValidate, {
    inject: true, // 自动向所有 Vue 实例注入 $validator
    // 关键避坑：重命名默认绑定的属性，防止与其他第三方库冲突
    fieldsBagName: 'veeFields',
    errorBagName: 'veeErrors',
    dictionary: {
        zh_CN: zh_CN
    }
})

// 3. 强制激原本土化语言
Validator.localize('zh_CN')

---

3. 进阶：自定义验证规则扩展

如果官方内置的 required, email 等无法满足业务需求，可以通过 extend API 注入正则表达式或特定的业务断言。

警告

挂载顺序 自定义规则的扩展必须写在 Validator.localize() 语言激活操作之后，否则提示文案可能无法正确绑定。

Validator.extend('alph_under', {
    // 触发错误时的回显文案
    getMessage: field => '仅支持数字、下划线、字母',
    // 核心验证逻辑 (返回 boolean)
    validate: value => {
        return /^[a-zA-Z0-9_]*$/.test(value)
    }
})

---

4. 模板视图层调用示例

在 .vue 文件的 HTML 模板中，通过指令挂载规则，并通过重命名后的 veeErrors 对象提取报错。

<!-- 挂载基础必填规则与我们刚才自定义的正则规则 -->
<input v-validate="'required|alph_under'" name="username_input" type="text">

<!-- 实时展示错误信息 -->
<span class="error-text">
    {{ veeErrors.first('username_input') }}
</span>

5. 参考资料

• VeeValidate V2 官方文档