用计算属性管理动态流式表单校验,核心是规则静态化、校验函数纯化、更新响应式化:规则配置集中为结构化对象,按 formmode 等变量动态映射;每字段配专属计算属性返回 {valid, message};跨字段联动靠响应式依赖自动触发;动态项用 key 批量生成规则。

用计算属性管理动态流式表单校验,关键在于把“规则定义”和“状态响应”彻底分开——规则是静态配置,校验逻辑是纯函数,而触发更新完全依赖 Vue 的响应式追踪。不需要 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)立刻重求值——无需事件总线、不写 watch、不手动刷新。
- 用户勾选“需要发票” → invoiceType 变为必填,同时 taxId 规则增强(加 pattern + required)
- 选择“企业客户” → companyField.visible = true,且其校验规则立即激活
- 所有被读取字段必须是响应式(ref / reactive / data),普通 const 变量不会触发更新
动态表单项用 key 驱动规则生成
对于表格新增行、答疑列表等结构可变场景,用唯一 key(如 item-1、item-2)构建字段路径,再通过计算属性批量生成对应规则对象。
- fields.map((item, i) => ({ key: `name-${i}`, value: item.name })) → 动态生成 name-0Rule、name-1Rule…
- 删除某行时,同步从表单模型中清理该 key 对应字段,避免提交脏数据
- 规则工厂函数可复用,例如 createRequiredRule(fieldName, isActive)










