Vue3 表单校验:把规则、时机和提交状态分开
背景 输入一个字符就报错会打断用户,提交时才发现全部错误又太晚。校验规则、触发时机和请求状态应分别管理。 核心判断 值、touched、错误和 submitting 各自表达明确职责。 同步格式检查先完成,远程校验需要防抖和响应序号。 提交期间禁用重复提交,失败后保留输入与可恢复提示。 最小示例 下面保留核心逻辑;业务类型、调用入口和环境配置按项目补齐。 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。客户端验证不能替代服务端校验;重复点击保护也不等于后端幂等。 验证方式 模拟慢请求时连续点击提交,并构造邮箱异步校验乱序、服务端字段错误与网络中断,确认提示位置与恢复行为一致。 小结 字段值、错误、触碰状态和提交状态分开管理,避免提示闪烁和重复请求。