表单校验
Form Validation
别名:表单校验输入报错实时校验表单验证输入错误提示红框报错
这是什么
在用户填写表单的过程中或提交时检查输入合法性，并把错误就地显示在对应字段旁边。 目标是让用户在离错误最近的位置、以最小的打断成本知道"哪里错了、怎么改"，而不是提交后被一整个错误页打回。
交互实验室
试一试，再决定怎么用正在加载实验室…
✓ 适用场景
- 注册、登录、结账等字段正确性直接影响流程的表单
- 字段有明确格式约束（邮箱、手机号、密码规则）
- 表单较长，用户需要在提交前发现并修正问题
✕ 不适用场景
- 用户还在输入中途就狂报错，造成干扰
- 纯偏好类选项没有对错，无需校验
- 错误信息含糊（"输入无效"），用户无法据此修正
常见形式
失焦校验
On blur
离开字段时检查，干扰最小
实时校验
Live
输入即校验，反馈最快，注意时机
提交校验
On submit
点提交统一检查并定位首个错误
实现要点
:focusaria-invalidtransition-colors[role=alert]错误态用 aria-invalid 与红色描边标记字段，错误文本挂 role="alert" 或 aria-live="polite"。 校验时机建议：失焦后开始实时校验，提交时统一兜底并聚焦首个错误字段。错误信息写清原因与改法， 不要只写"无效"。成功态可用绿色勾选即时确认。
横向对比
查看完整对比 →相关概念
用一条带边框的水平输入区收集单行文本，是表单的基本单元。 占位符提示期望格式，聚焦时高亮边框引导视线，校验失败时切换错误色 并附提示文案；可内嵌前后缀图标与清除按钮，受控管理输入值。
组件搭配使用在视口角落短暂出现、自动消失的小消息条，用来告知操作结果（已保存、已复制、上传完成）。 不打断当前流程，通常附一个操作入口（撤销、查看），停留约 3~5 秒后淡出。
组件替代方案嵌在页面流内、带状态色底色的横条，用于必须被看见的消息：错误、警告、重要通知。 它占据文档流而不是覆盖内容，通常常驻直到问题被处理或用户手动关闭。
组件替代方案页面上的文本本身即可编辑：单击把文本原位变成输入框，Enter 或失焦确认，Esc 取消， 改完所见即所得。它解决的是"小改动也要跳转完整编辑页"的问题—— 把修改成本降到一次点击，特别适合单字段的快速修订场景。
交互模式相似概念当列表或页面没有数据时，不留一片空白，而是用插图、一句说明和一个明确的下一步操作填充。 它解决的是"用户面对空白不知道发生了什么、也不知道该做什么"的问题—— 把空档变成引导起点：首次使用教用户开始，搜索无结果给出路。
交互模式相似概念