计算属性实现动态表单校验的核心是规则与状态分离：规则来自配置，状态驱动响应，校验逻辑只读不写、结果自动更新；支持跨字段联动、动态表单项和单元测试，无需手动触发或第三方库。
用计算属性做基于配置的动态表单校验，核心是把“规则”和“状态”分离——规则来自配置，状态驱动响应，校验逻辑只读不写，结果自动更新。它不依赖第三方校验库，也不需要手动触发 validate()，真正实现配置即逻辑、变化即生效。
规则配置集中管理，按需生成校验对象
把所有字段的校验规则定义成纯配置对象（如 JSON 或 JS 对象），不直接写在 data 或 methods 里。然后用一个计算属性统一读取当前业务状态（比如角色、地区、表单模式），再动态映射出最终 rules。
- 配置示例：定义基础规则池，含 required、minLength、pattern、validator 等字段
- 计算属性中判断 formMode === 'edit' 时启用 lengthCheck；formMode === 'create' 时跳过
- 返回结构严格对齐 UI 框架要求（如 Element Plus 的数组格式、uView 的对象嵌套）
- 避免在 computed 中 new RegExp 或重复创建函数，可提前缓存正则实例或 validator 工厂
字段级校验封装为独立计算属性
每个输入字段对应一个计算属性，返回 { valid: boolean, message: string } 结构。它只读取本字段值 + 相关上下文（如其他字段、全局开关），不修改任何 state。
- 例如 usernameRule：检查非空 + minLength(3) + 是否已存在（调用已缓存的 checkUsernameTaken 函数）
- confirmPasswordRule：读取 password 和 confirmPassword，仅当两者都非空时比对
- 模板中直接绑定 :class="{ error: !usernameRule.valid }" 或显示 usernameRule.message
- 所有校验逻辑可单独单元测试，不依赖 Vue 实例
跨字段联动靠响应式依赖自动触发
Vue 会自动追踪计算属性中访问的所有响应式数据。只要某个字段变更，所有依赖它的校验计算属性立刻重求值，无需 watch 或事件总线。
- 地址选择后 areaCode 改变 → 触发 receiverMobile 和 receiverPhone 的 required 状态切换
- 用户勾选“需要发票” → invoiceType 字段变为必填，同时 taxId 校验规则动态增强
- 关键点：所有被读取的字段必须是响应式（data / ref / reactive），不能是普通 const 变量
- 避免副作用：不在 getter 中调用 API、不修改 this.form、不使用 this.$set
动态表单项支持 key 驱动的规则注入
对于表格内新增行、答疑列表等动态结构，用唯一 key 构建字段路径（如 name-1、age-2），再通过计算属性生成对应 rules 对象。
- rules 计算属性遍历 detailList，为每项生成形如 'name-' + item.key: [{ required: true }] 的规则条目
- v-model 绑定 form['name-' + item.key]，el-form-item prop 同步设为 'name-' + item.key
- 新增/删除行时，key 变更 → 计算属性重新执行 → rules 自动更新 → 表单校验状态实时同步
- 注意：form 数据也需用 $set 或 reactive 包裹，确保新增字段响应式
