浏览 AI 知识库
表单怎样补齐校验、错误、禁用和提交中状态
一个能输入、能提交的表单，还不等于能用。空值、格式错误、接口失败、重复提交和提交中状态，都需要明确反馈和恢复路径。
按实际操作顺序推进
每完成一段就检查当前输出，确认结果符合预期后再继续。
表单最容易漏掉的，往往不是输入框，而是出错以后怎么办
注册表单只有输入框和提交按钮。弱密码提交后页面无反应；重复点击产生两次请求；接口返回邮箱已存在时错误显示在顶部，用户不知道改哪一项。
- 字段与全局错误正确归位
- 重复提交被阻止
- 键盘、焦点和成功跳转已验证
动手前，把材料和不能改的部分定下来
| 需要确认 | 本例内容 |
|---|---|
| 现有材料 | 字段为邮箱、密码、协议勾选；API 可能返回 409、422、429 和 500；提交成功跳转验证邮箱页。 |
| 不能越过的边界 | 客户端提示用于体验，服务端仍执行最终校验；提交中防重复；错误与字段或全局状态正确对应。 |
| 要交付的结果 | 表单状态矩阵与交互验收 |
表单交互状态设计，从“字段与校验”开始做
字段与校验
区分必填、格式、范围、跨字段和服务端规则，错误文案说明怎么修，不只写无效。
触发时机
决定输入中、失焦或提交时校验，避免过早打断，也避免提交后只在页面顶部报错。
提交中与幂等
提交后防重复操作，展示进度；后端使用幂等或唯一约束处理重复请求。
成功与失败
成功说明发生了什么和下一步；失败保留用户输入，区分可重试、需修改和无权限。
键盘与可访问性
标签、描述、错误关联、焦点顺序和按钮状态对键盘与辅助技术可理解。
登录表单的四种失败不能都写成‘提交失败’
| 场景 | 触发 | 用户看到 | 请求/状态 | 验收 |
|---|---|---|---|---|
| 必填缺失 | 邮箱为空点击提交 | 字段旁说明请输入邮箱，焦点回字段 | 不发送请求 | 错误与字段关联 |
| 格式错误 | 输入 a@ 点击提交 | 说明邮箱格式不完整，保留输入 | 不发送请求 | 修正后错误消失 |
| 服务端拒绝 | 密码错误 | 账号或密码错误，不泄露账号存在性 | 401，按钮恢复 | 可重新提交 |
| 重复提交 | 连续点击两次 | 按钮处理中并禁用 | 后端幂等只创建一次 | 网络慢时不重复 |
完成后的表单状态矩阵与交互验收
状态矩阵覆盖初始、输入中、字段错误、提交中、成功、409 冲突、429 限流与网络失败。提交中按钮禁用并保留文案；409 绑定邮箱字段；未知错误显示重试和 requestId。
为什么“错误提示完整，键盘用户仍无法完成”还不能交付
错误提示完整，键盘用户仍无法完成
- 原因
- 焦点、标签与错误关联未实现
- 怎么改
- 使用真实键盘流程和辅助技术检查焦点顺序、aria 描述与提交后定位