FORM & INPUT
内联校验状态Input Validation States
输入框自己在边框上报告状态：绿框对勾是合法，红框加一行小字说明错在哪。
效果预览
✓ 邮箱可用
⚠ 邮箱格式不正确，检查一下 @ 后面的部分
适合用在哪
所有表单。注册页尤其要做实时校验（失焦即验，不要等提交）。
容易踩的坑
- 错误态只靠红色描边表达，色弱用户分辨不出，必须同时给出图标和文字说明。
- 错误文案未用 aria-describedby 关联输入框且无 aria-invalid，读屏用户不知道哪里错了。
- 提交时多个字段报错却不把焦点移到第一个错误字段，长表单用户要自己往上翻找。
设计提示词 · Prompt
内联校验状态（Inline Validation）：三种状态——默认（中性描边）、合法（绿色描边 + 3px 12% 绿色光晕 + 右侧对勾图标）、错误（红色描边 + 3px 12% 红色光晕 + 下方 12px 红色错误文案，文案要具体："邮箱格式不正确，检查一下 @ 后面的部分"，不要只写"输入错误"）。时机上：失焦时才第一次校验（别在用户打字到一半就报错），报错后用户再次修改则实时校验。禁用浏览器原生校验气泡，统一用内联样式。
Inline Validation: three states — default (neutral border), valid (green border + 3px 12% green glow + checkmark icon on the right), error (red border + 3px 12% red glow + 12px red error message below; the message must be specific: "The email format is incorrect, check the part after the @", not just "Invalid input"). Timing: validate for the first time only on blur (don't report errors while the user is halfway through typing); after an error is shown, validate in real time as the user edits again. Disable the browser's native validation bubbles and use inline styles consistently.
常见搭配
同一页面里经常和「内联校验状态」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-validwrap"> <div class="d-valid d-valid--ok"><input value="hello@nova.dev" readonly><span class="d-valid__msg">✓ 邮箱可用</span></div> <div class="d-valid d-valid--err"><input value="hello@@nova" readonly><span class="d-valid__msg">⚠ 邮箱格式不正确，检查一下 @ 后面的部分</span></div> </div>