动态表单校验规则须响应式生成与更新，用 reactive/ref 管理 rules；条件校验通过 computed 或 validator 实现；动态 ref 定位错误字段并聚焦；避免 v-if 销毁节点导致规则失效。
动态表单的校验规则不能写死，必须随字段结构、业务状态实时生成和更新。核心在于让 rules 对象本身保持响应式，并确保 Element Plus（或 Element UI）的 Form 组件能感知到它的变化。
用 reactive 或 ref 管理 rules 对象
不要把 rules 定义成普通对象或常量。它必须是响应式的，否则修改后 Form 不会重新收集校验规则。
- Vue 3 + Composition API：用
reactive({})或ref({})创建 rules，字段 key 和规则数组都可随时增删改 - Vue 2 + Options API：将 rules 放在
data()中返回，或用Vue.set/this.$set动态添加新字段规则，避免直接赋值导致响应失效 - 示例（Vue 3）：
const rules = reactive({})<br>fields.forEach(field => {<br> if (field.required) {<br> rules[field.id] = [{ required: true, message: `${field.label} 为必填项`, trigger: 'blur' }] <br> }<br>})
按需注入规则：条件必填与联动校验
字段是否需要校验，取决于其他字段的值（如“是否启用”开关、“证件类型”下拉框）。这时不靠 v-if 控制渲染，而是靠规则内容动态切换。
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 给目标字段的 rules 绑定一个计算属性或函数调用，内部判断条件再返回对应规则数组
- 例如：
:rules="form.enable ? enableRules : []"，其中enableRules是一个 computed 或方法 - 更灵活的做法是用
validator自定义函数，在函数内读取当前 form 数据做逻辑判断，支持异步校验（如接口查重）
动态 ref 配合校验定位（聚焦首个错误）
提交失败后要滚动并聚焦第一个非法输入框，前提是能准确拿到 DOM 元素。模板里无法预写 ref 名，得靠运行时绑定。
立即学习“前端免费学习笔记（深入）”；
- 用
let inputRefs = reactive({})，渲染每个 input 时：<el-input :ref="el => inputRefs[field.id] = el" /> - 校验失败后遍历
fields找第一个 invalid 字段，再通过inputRefs[id]拿到对应组件实例，调用.focus()或.scrollIntoView({ behavior: 'smooth' }) - 注意：ref 回调会在组件挂载/更新时执行，确保 inputRefs 已初始化且 key 与字段 id 一致
避免常见陷阱
很多问题不是规则写错，而是机制没对齐。
- 不要用
v-if隐藏整个el-form-item后还指望它的 rules 生效 —— 节点销毁了，规则就脱离上下文 - 不要在
rules里直接引用未响应式的数据（比如从 props 浅拷贝来的对象），否则条件变化时 rules 不更新 - Element Plus 的
validate方法是异步的，需用await this.$refs.form.validate()或回调接收结果，否则可能跳过校验直接提交
