Inline Validation
即时校验
WebMobileDesktop上手难度: 中等
在用户输入的过程中就告诉他「这样填对不对」，而不是等他提交。
Live Demo
真的可以点至少 8 个字符
你刚才看到的这个：输入邮箱时，边打边显示「✓ 格式正确」；失焦时显示「请输入完整的邮箱地址」。密码框下方实时更新「密码强度：中」。
它到底是什么
Inline Validation 的时机选择是关键：在输入过程中（每敲一个键）报错是最烦人的；只在失焦和提交时校验才对。它和 Form Validation 的区别是「在哪里、什么时候」。
即时校验inline validation实时校验输入校验即时反馈
Anatomy · 它由什么组成
Field输入框
错误态红边
Message提示信息
红/绿，说明怎么改
Icon状态图标
✓ / !，非唯一提示
Timing时机
blur 或 submit，不在每键
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 输入有明确的格式约束 | 用 |
| 错误可以自动检测并给出修正提示 | 用 |
| 长表单（填写成本高） | 用 |
| 错误只有提交后才知道 | 视情况 |
| 每敲一键就报错的规则 | 不用 |
不要在用户刚开始输入时就报红——先让他打完再判断。
错误提示要告诉用户「怎么改」，不是「哪里错了」。
Similar Patterns
别搞混一句话区分：在用户输入的过程中就告诉他「这样填对不对」，而不是等他提交。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
邮箱输入框在失焦时校验格式：合法时显示绿色对勾 +「格式正确」，非法时红边 +「需要包含 @ 的完整邮箱地址」。
不要只对 AI 说
Bad → Better不要这样对 AI 说
输入的时候检查格式。
改成这样说
加 Inline Validation：只在 blur 和 submit 时校验（不在 onChange 每键报错），错误文案写成可操作的修正建议（如「需要包含 @」而非「格式错误」），配红边 + 错误文本 + aria-invalid + aria-describedby，正确时给绿色 ✓。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。