COMPONENT 42 · Feedback & Status

行内校验

Inline Validation

也叫Field ErrorValidation Message表单错误提示

在输入控件附近说明错误、成功或格式要求。

Explains an error, success state, or requirement next to the relevant field.

ANATOMY & USAGE

结构与使用建议

组成部分

字段状态
错误文字
修复提示

适合使用

用户需要知道具体字段为何无效以及如何修复时。

不建议使用

用它替代所有提交时汇总，导致用户找不到其他错误时。

键盘与无障碍

设置 aria-invalid 并由 aria-describedby 关联错误；提交后将焦点引导到错误摘要或首个错误。

DESCRIBE IT TO AI

这样告诉编程助手

实现行内校验（Inline Validation）：在输入控件附近说明错误、成功或格式要求。

MINIMAL RUNNABLE CODE

可复制代码

原生与 React 两套实现，不依赖第三方组件库。

READ ONLY · SAFE TO COPY

<div class="demo stack">
  <label for="email">邮箱</label>
  <input id="email" type="email" aria-invalid="true" aria-describedby="email-error" value="name@">
  <p id="email-error" role="alert">请输入完整邮箱地址，例如 name@example.com。</p>
</div>