应通过errors对象统一管理各字段校验结果,结合activefields控制联动字段参与校验范围,并利用touched状态避免未操作字段误判;isformvalid仅检查已触碰的激活字段是否无错误,确保语义准确、性能高效。

直接用 computed 推导多表单联动的“整体可提交”状态,关键不是堆逻辑,而是把判断条件收口、分层、可读。
把校验结果统一归到 errors 对象
每个字段的校验结果(无论同步还是异步)最终都写入一个响应式 errors 对象,比如 errors.email、errors.phone、errors.address.city。这样 computed 就有统一入口去检查:
- 字段为空但未被编辑时,errors 中不设值或设为 null,避免误判
- 格式错误、远程冲突、联动不匹配等,都落地为 errors[key] = '提示文案'
- 清空字段后主动 delete errors[key],保持 errors 是“真实错误集合”而非历史快照
用 computed 汇总是否全部通过
定义一个 isFormValid 计算属性,只检查 errors 是否为空对象(或所有字段 error 均为 null/undefined):
- 不遍历原始 form 数据,只遍历 errors —— 因为只有出错才记录,效率高且语义准
- 可用 Object.values(errors).every(v => !v),简洁可靠
- 若需排除某些非关键字段(如“备注”不参与提交拦截),可白名单过滤:['email', 'password', 'agreement']
联动字段的通过性要反映依赖关系
例如“城市”下拉框启用的前提是“省份”已选,而“城市”本身又影响“区县”。这时不能只看 errors.city 是否为空,还要看它是否“本该生效”:
- 加一个 activeFields 响应式数组,记录当前业务逻辑下哪些字段是激活态(如 province !== '' ⇒ city 被激活)
- isFormValid 改为:对每个 activeField,检查其 errors[field] 是否为空
- 这样即使 errors.city 为空,但 city 不在 activeFields 中,也不计入校验范围
结合 touched 状态避免过早拦截
用户刚打开表单,所有字段都为空,此时不应判定为“不合法”。所以 isFormValid 还需考虑操作痕迹:
- 维护一个 touchedFields Set 或对象,input/focus 时标记对应字段
- isFormValid 可定义为:所有 touched 字段的 errors 均为空,未 touched 的字段忽略
- 提交前可先触发 touchAll() 强制标记全部字段,再走完整校验










