标准答案
- 同步校验适合 required、长度、格式、范围等本地规则，反馈应尽量贴近字段。
- 异步校验适合用户名唯一性、优惠码有效性、远端规则检查，要处理 loading、取消、去抖和旧结果丢弃。
- 跨字段校验适合确认密码、开始结束时间、区间范围、依赖选项变化等场景，需要在相关字段变化时重新校验。
- 提交态要控制按钮 disabled、loading、错误汇总、接口错误回填和重复提交。
- 复杂表单可以把字段模型、校验 schema、提交逻辑和 UI 组件拆开，避免页面组件变成超大表单脚本。
题目解析
表单题不能只说用某个组件库 rules。业务表单真正容易出问题的是异步校验时序和提交状态。
异步校验要防止竞态：用户改了输入，旧请求后返回，不能覆盖新字段的校验结果。
跨字段校验要明确依赖关系，否则一个字段变了，另一个字段错误信息可能还是旧的。
代码示例
下面用递增 token 避免旧的异步校验结果覆盖新的输入。
TypeScript
let validateToken = 0
async function validateUsername(username: string) {
const token = ++validateToken
usernameChecking.value = true
try {
const available = await api.checkUsername(username)
if (token !== validateToken) return
usernameError.value = available ? '' : '用户名已被占用'
} finally {
if (token === validateToken) {
usernameChecking.value = false
}
}
}常见误区
- 异步校验没有处理竞态，旧请求返回后覆盖新输入的状态。
- 提交按钮没有 loading 和 disabled，用户可以连续提交多次。
- 跨字段依赖变化后没有重新校验相关字段，错误提示滞后。