哪里错了，说清楚就好
把“出错了”变成一条能执行的修正建议。
互动实验在真实界面中看
正在准备互动实验…
02 — COMPARE / 看见方法的作用
同一个任务，换一种处理方式。
先看两种实现，再找出让交互更清楚的那条规则。
未使用 Skills · 基础实现基础版本
正在准备互动实验…
明确标记错误，但修正提示较泛。
使用 Skills · 应用交互规则规则应用
正在准备互动实验…
指出缺少的格式并给出例子。
01 / 改了什么
更具体的文案与就近关联；不是给错误加更大动画。
02 / 为什么这样改
错误提示要告诉用户位置、原因和下一步。
03 / 什么时候不需要
不要只摇动输入框或将边框变红，也不应每输入一个字都报错。
教学示意，非 AI 生成实测。两侧的任务、内容和输入条件一致；只比较这里说明的规则。Skills 不保证每次生成相同结果。
03 — APPLY / 放进真实项目
错误提示要告诉用户位置、原因和下一步。
01真实 label 不用 placeholder 替代。
02错误通过 aria-describedby 关联到输入框，同时显示修正方法。
03输入值不清空；修正后反馈就地更新。
适合用在注册表单设置输入需要格式校验的信息
把这段需求，交给你的 AI
为邮箱输入提供真实标签和就近错误提示。提交后指出具体格式问题并保留输入。用户修正后清除错误；读屏能关联提示。动画可选，禁止只依赖颜色或摇晃。
实现代码与机制 ＋
以下片段解释核心机制，需要与状态、语义和清理逻辑一起使用。页面演示由本地受控组件实现。
<label htmlFor="email">邮箱</label>
<input id="email" aria-invalid={hasError}
aria-describedby={hasError ? "email-error" : undefined} />
<p id="email-error">请补全 @ 后的域名，例如 you@example.com。</p>原理、来源与适用边界 ＋
不要只摇动输入框或将边框变红，也不应每输入一个字都报错。
减少动态效果时去掉装饰位移、回弹和自动连续播放，保留功能、状态文字与手动查看步骤。
阅读对应的中文方法笔记 ↗本案例是独立教学实现。前后对比说明具体规则，不是对某个模型的效果承诺。