事务型表单错误恢复

大理论

表单错误是用户路径的一部分，不是异常弹窗。越是公共服务、金融、医疗、合规和申请流程，越要把错误恢复设计成稳定循环：发现问题、解释原因、定位字段、保留输入、允许修改、继续提交。

小知识点

1. 页面顶部显示错误摘要，即使只有一个错误，也要让用户先知道页面状态。
2. 错误摘要里的每个链接指向对应字段，字段附近再显示相同含义的错误消息。
3. 页面 title 应加入错误状态，帮助屏幕阅读器尽早读出页面失败；NHS/GOV.UK 模式都把标题状态作为恢复路径的一部分。
4. 失败后保留用户已输入内容，不要清空表单；这也降低 WCAG Redundant Entry 风险。
5. 默认不要在 blur 时验证；通常等用户点击 continue/submit 再验证，避免慢速输入者被频繁打断。
6. 不要用浏览器原生 HTML5 validation 替代自定义可访问错误模式。
7. 日期、单选、复选、地址等字段组要把错误锚点、legend、hint、error 和第一个可编辑控件串起来。
8. 医疗/身份/资格表单的错误文案要写修复动作，并让摘要和字段旁文案一致。

设计判断

如果用户能从顶部摘要跳到字段、理解怎么修、看到自己原来填了什么，并继续提交，错误恢复是健康的；如果错误只在红框里、内容被清空或焦点留在未知位置，就是失败的。

实现建议

表单提交失败时：阻止原生 HTML5 validation，服务端仍做最终验证，更新 document title，渲染 error summary，移动焦点到 summary，把 aria-describedby 连接到 hint/error，并保留字段值。错误文案写具体问题，不写泛化的“输入无效”。移动端还要验证错误字段不会被 sticky header、底部提交栏或键盘遮挡。

反例/风险

只显示 toast、只把边框变红、表单被清空、错误摘要和字段错误文案不一致、链接不到字段、实时验证让慢速输入用户不断被打断、日期字段组只给外层 div 错误状态但输入没有 label/description。

案例分析

GOV.UK Design System 的 Error summary 要求有验证错误时总是显示错误摘要，并把键盘焦点移到摘要；Validation pattern 要求重新显示用户填过的表单、在标题加错误提示、在顶部显示错误摘要、在字段旁显示错误消息，并关闭 HTML5 validation。NHS digital service manual 的错误摘要和错误消息模式补充了医疗/健康服务语境：错误摘要链接到每个出错答案，字段旁显示相同错误，错误消息说明问题和修复方式，并保留用户已输入信息。可学习点是：错误恢复是一组协调动作，而不是单个红色组件。

来源链接

GOV.UK Error summary: https://design-system.service.gov.uk/components/error-summary/ GOV.UK Validation pattern: https://design-system.service.gov.uk/patterns/validation/ GOV.UK Error message: https://design-system.service.gov.uk/components/error-message/ NHS Error summary: https://service-manual.nhs.uk/design-system/components/error-summary NHS Error message: https://service-manual.nhs.uk/design-system/components/error-message NHS Design system: https://service-manual.nhs.uk/design-system