Form Validation 是一种表单验证 UX 模式,目标是让团队以可靠的方式提供字段级与表单级反馈,同时避免在用户尚未掌握足够信息时就打断其操作。
用途 该模式主要用于需要用户输入并持续获得反馈的场景,文档明确列出:账户创建、结账与计费表单,以及同时包含客户端和服务端规则的流程表单。它的价值在于减少摩擦,同时不隐藏用户继续操作所需的状态、规则或恢复路径。
何时避免使用 当取值是二元的、极小的或完全受限时,应优先使用更简单的原生控件。若浏览器原生输入已经很好地解决了主要任务,就应避免自定义行为。如果产品无法从额外的格式化或验证中获益,也不要添加。
实施流程
- 在复制示例前,先确认该模式与问题和约束相匹配。
- 从 references/pattern.md 中的结构与示例入手,然后选择最小可行变体。
- 在叠加视觉润色之前,先应用无障碍、性能和交互护栏。
- 使用测试指引验证键盘、屏幕阅读器、响应式以及失败场景下的行为。
无障碍护栏 键盘交互:确认仅用键盘即可完成表单验证;当模式打开、更新或展示额外 UI 时保持焦点顺序合乎逻辑;保持可见焦点状态,并确保在高倍缩放下仍可读。 屏幕阅读器支持:优先使用语义元素,仅在语义不足以表达时补充 ARIA;在正确位置以正确礼貌级别播报错误、加载或完成等状态变化;在有用时用 aria-describedby 或结构性标题连接标签、提示与状态文本。 视觉可访问性:不要仅靠颜色传达严重程度、完成或选中状态。
常见错误
- 在错误的时机验证:对部分输入立即验证会显得苛刻且嘈杂。修复方式是等用户在字段中有足够信息后,再根据规则风险选择失焦、暂停或提交时验证。
- 标签、提示与错误分离:当文案在视觉上脱节时,用户无法分辨哪条消息属于哪个控件。修复方式是保持标签、帮助文本与验证消息紧密分组,并在适当处用 aria-describedby 连接。
- 忘记触摸与自动填充行为:仅面向桌面的样式会掩盖移动键盘、自动填充与粘贴流程行为不同的事实。修复方式是在宣布模式完成前,用自动填充、粘贴、缩放和屏幕键盘进行测试。
完整实现细节、示例与测试说明见 references/pattern.md。