动态表单联合校验需让规则具备上下文判断能力，通过自定义validator统一读取表单数据实现字段联动；注意rules响应式更新（用$set或computed）；数组类动态表单宜顶层校验或使用vee-validate+yup；隐藏字段须主动clearvalidate或动态返回空rules。
动态表单中的联合校验，核心在于让校验逻辑能感知字段间的状态依赖，而不是把每个字段孤立处理。关键不是“加更多 rules”，而是让规则本身具备上下文判断能力。
用自定义 validator 统一处理联动逻辑
把多个字段的校验收口到一个函数里，由它读取当前整个表单数据，再决定是否报错。比如“证件类型”选身份证时，要求“证件号”符合18位规则；选护照时则走另一套正则：
- 在 rules 中为证件号字段配置一个 validator 函数，参数里能拿到 formData 和 field（当前字段名）
- 函数内部先读取证件类型字段值，再按分支校验证件号内容，返回 true 或 Error 实例
- 触发时机设为 change，确保类型切换后立刻重验证件号
动态更新 rules 对象要小心响应式失效
直接给 this.rules 某个字段赋新数组，Vue 可能检测不到变化。更稳妥的做法是：
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
- 用 Vue.set 或 this.$set 显式设置 rules 的子属性，例如 this.$set(this.rules, 'idNumber', newRules)
- 或者把 rules 声明为计算属性，让它自动响应 formData 的变化，避免手动维护同步
- 注意：vxe-table 的 vxe-form 和 Element Plus 的 el-form 对 rules 响应式的处理略有差异，Element Plus 更依赖 computed 规则
嵌套数组类动态表单的联合校验写法
当表单包含可增删的子项（如多条联系人信息），联合校验常需跨行判断，比如“至少填一条有效联系方式”。这时不能只靠单个 prop 路径校验：
- 把校验逻辑提到表单顶层，用 this.$refs.form.validate() 的回调函数中遍历 items 数组
- 对每项调用 this.$refs.form.clearValidate(['items.'+i+'.phone']) 配合手动 setFieldError 控制错误提示位置
- 或改用 vee-validate + yup，用 array().min(1) 这类组合规则直接声明业务约束
避免隐藏字段干扰整体验证结果
动态显示/隐藏字段时，不要只靠 v-if 控制 DOM，否则 el-form 仍会校验已隐藏字段：
- 配合 watch 监听控制字段的开关状态，在状态变更时主动清除对应字段的校验：this.$refs.form.clearValidate(['fieldName'])
- 或把 rules 写成函数返回值，在函数内根据当前状态返回空数组或完整规则，让校验器自然跳过
- 对于 vxe-table，建议用 visible 属性替代 v-if，保持字段实例存在但视觉隐藏，再配合 rules 动态返回 []
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
