Vue3 表单校验：把规则、时机和提交状态分开

背景

输入一个字符就报错会打断用户，提交时才发现全部错误又太晚。校验规则、触发时机和请求状态应分别管理。

核心判断

1. 值、touched、错误和 submitting 各自表达明确职责。
2. 同步格式检查先完成，远程校验需要防抖和响应序号。
3. 提交期间禁用重复提交，失败后保留输入与可恢复提示。

最小示例

下面保留核心逻辑；业务类型、调用入口和环境配置按项目补齐。

async function submit() {
  if (submitting.value) return;
  touched.email = true;
  errors.email = validateEmail(form.email);
  if (errors.email) return;
  submitting.value = true;
  try {
    await save({ ...form });
  } finally {
    submitting.value = false;
  }
}

边界与误区

示例依赖已有 form、errors、touched 和 save。客户端验证不能替代服务端校验；重复点击保护也不等于后端幂等。

验证方式

模拟慢请求时连续点击提交，并构造邮箱异步校验乱序、服务端字段错误与网络中断，确认提示位置与恢复行为一致。

小结

字段值、错误、触碰状态和提交状态分开管理，避免提示闪烁和重复请求。