vue 2动态表单校验需解决规则随字段增删同步、跨字段逻辑复用、错误状态精准反馈三大问题；应通过computed动态生成rules、自定义validator函数依赖追踪、引入veevalidate/vuelidate统一管理、结合vuex实现服务端规则驱动。
在 Vue 2 的复杂动态表单中，自定义校验规则不是“加个函数就行”，而是要解决三个实际问题：规则随字段增删而同步、跨字段逻辑可复用、错误状态能精准反馈。关键不在于写多少判断，而在于让规则“活”在数据结构和生命周期里。
用 computed 动态生成 rules，适配字段增删
当表单项数量不固定（如动态添加的联系人、附件、地址条目），不能把 rules 写死在 data 中。应改用计算属性，根据当前字段列表实时组装规则对象：
- 假设 form.items 是一个数组，每项有 name 和 phone 字段，就在 computed 中返回 rules：
- rules() { return this.form.items.reduce((acc, item, idx) => { acc[`items.${idx}.name`] = [{ required: true, message: '姓名不能为空' }]; acc[`items.${idx}.phone`] = [{ pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确' }]; return acc; }, {}); }
- 模板中 el-form-item 的 prop 必须严格匹配 keys，例如写成 prop="items.0.name"；同时确保 :rules="rules" 绑定的是这个计算属性
封装跨字段校验函数，支持依赖追踪
比如“确认密码”需比对原始密码，“结束时间”不能早于“开始时间”，这类逻辑不能靠单字段 rule 解决。要用自定义 validator 函数，并显式声明依赖字段：
- 在 rules 对象中为 confirmPassword 字段写：{ validator: (rule, value, callback) => { if (value !== this.form.password) callback('两次输入不一致'); else callback(); }, trigger: 'blur', message: '请确认密码' }
- 注意：函数体里直接访问 this.form.password，Vue 2 的响应式系统会自动追踪该依赖；只要 password 改变，下次 validate 时就会重新执行这个 validator
- 若涉及多个字段联动（如人员列表去重），可在 validator 里遍历 this.form.items，检查 name+phone 组合是否唯一
结合第三方库统一管理异步与组合规则
纯手写 validator 容易散落在各处，难维护。推荐用 VeeValidate v2 或 Vuelidate（Vue2 专用版）接管：
- VeeValidate：给每个动态字段加 v-validate="'required|customPhone'"，再通过 Validator.extend('customPhone', { validate: val => /^1[3-9]\d{9}$/.test(val), getMessage: () => '请输入有效手机号' }) 注册全局规则
- Vuelidate：在 validations 选项中写 items: { required, each: { name: { required }, phone: { required, customPhone } } }，语义清晰且天然支持嵌套数组校验
- 两者都支持异步校验（如用户名是否已存在），只需在 validator 函数中 return Promise，并在 resolve/reject 时调用 callback
服务端规则驱动时，用 Vuex 集中加载并注入校验流
当规则由后端配置（如不同租户不同要求），不要硬编码。可在路由守卫中请求规则接口，存入 Vuex，再映射到组件的 rules 计算属性中：
- store 中维护 state.rulesList，结构形如 { username: [{ pattern: '/\S+/', message: '用户名必填' }], email: [...] }
- 组件内 computed: { rules() { const backend = this.$store.getters['dyRule/getRules']; return { ...backend, ...this.localRules }; } }
- 提交前调用 this.$refs.form.validate()，内部会自动使用最新规则，无需手动刷新
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
