核心是规则与状态响应分离：规则静态配置、校验函数纯化、更新响应式化，通过字段专属计算属性和动态 key 实现自动联动与增删。

核心是把规则定义和状态响应彻底分开：规则静态化、校验函数纯化、更新响应式化。不需要 watch、不手动调用 validate()、也不耦合组件实例，就能让字段增删、条件切换、跨字段联动全部自动生效。

规则配置集中化，按业务状态动态映射

把所有校验规则写成结构清晰的配置对象（如 JS 对象或 JSON），而不是散落在 data 或 methods 里。再用一个顶层计算属性，根据当前 formMode、userRole、isAdvanced 等响应式变量，筛选并组装出最终 rules。

• formMode === 'create' 时启用邮箱唯一性校验；formMode === 'edit' 时跳过，但增加修改痕迹比对
• 正则表达式、异步校验函数等开销大的内容提前缓存，避免在 getter 中重复创建
• 返回格式严格对齐 UI 框架要求（如 Element Plus 要求每字段为数组，uView 接受嵌套对象）

每个字段配专属计算属性，返回 { valid, message }

不共用一个大 rules 对象，而是为 username、confirmPassword、taxId 等每个字段单独声明计算属性。每个只读取本字段值 + 所需上下文（如 password、invoiceType），不修改任何 state，也不发起请求。

• usernameRule：检查非空 + minLength(3) + 调用已缓存的 checkUsernameTaken
• confirmPasswordRule：仅当 password 和 confirmPassword 都非空时才比对，否则 valid = true
• 模板中直接绑定 :class="{ error: !usernameRule.valid }" 或显示 usernameRule.message

跨字段联动靠响应式依赖自然触发

Vue 会自动记录计算属性中访问的所有响应式数据。只要 areaCode 改变，所有读取它的校验计算属性（比如 receiverMobile.required）立刻重求值。

• 用户勾选“需要发票” → invoiceType 变为必填，同时 taxId 规则增强（加 pattern + required）
• 选择“企业客户” → companyField.visible = true，且其校验规则立即激活
• 所有被读取字段必须是响应式（ref / reactive / data），普通 const 变量不会触发更新

动态表单项用 key 驱动规则生成

对于表格新增行、答疑列表等结构可变场景，用唯一 key（如时间戳或 uuid）驱动规则批量生成，确保每个项的校验上下文独立且可追踪。

• 新增联系人 → 分配 id="cont-abc123" → 其电话字段 key 为 "contacts.cont-abc123.phone"
• 删除时，清理以该 id 为前缀的所有状态键，避免残留校验态干扰新项
• 拖拽排序后，仅交换各 id 对应的数据位置，字段 key 不变，校验状态自然保留