表单验证提示：Helper / Error / Success

它是什么

字段下方那行小字，是表单和用户之间最细也最高频的对话通道。它有三种身份：

1. Helper Text——出错前的引导（中性色，「至少 8 个字符」）；
2. Error Message——出错后的纠正（错误色，「还差 3 个字符」）；
3. Success Feedback——通过后的确认（成功色，可省略）。

№03「表单结构与校验」管的是什么时候校验（实时 / 提交时 / 服务器端）；这个词条管的是反馈长什么样——放哪、什么颜色、怎么换班。三种身份共用字段下方同一个位置，替换出现，永不叠加。

快速判断

时刻	用哪种	颜色	必要性
用户还没填 / 正在填	Helper Text	次要色 Ink-2	有规则就该有
校验失败	Error Message	错误色 #A02C2C	必须有
校验通过	Success Feedback	成功色 #3D7A44	通常省略，高焦虑字段才用

换班规则

• 同一位置只显示一种：Helper → 出错换 Error → 修好换回 Helper（或 Success）
• 沉默即通过：大多数字段修正后直接回到 Helper，不需要绿勾
• 表单级（跨字段）的错误汇总不归这里——那用顶部 Alert，见 №04「提示（怎么选）」

错误态解剖

一个完整的错误态由三层组成，缺一层体验就塌一角：

┌─────────────────────────────┐
│ 密码 *                       │
│ ┌───────────────────────────┤ ← ① 边框变错误色（远看就知道有问题）
│ │ abc12                     │
│ └───────────────────────────┤
│ 密码至少 8 个字符，还差 3 个   │ ← ② 错误文字（近看知道错在哪、怎么改）
└─────────────────────────────┘
     ↑ ③ aria-invalid + role="alert"（看不见的用户也知道）

• ① 颜色通道：边框 + 文字用 error 色。只有这一层是不够的——色弱用户看不出红，看得出的也不知道错在哪。
• ② 文字通道：说清「什么错 + 怎么改」。可以加内联 SVG 警示 icon 强化（禁 emoji）。
• ③ 语义通道：aria-invalid="true"、错误容器 role="alert"、aria-describedby 关联——屏幕阅读器用户与明眼用户获得同等信息。

布局细节：给反馈行预留高度（min-height）或用固定行高替换——错误出现时把下方内容挤得跳一下（布局抖动），是廉价感的主要来源之一。

技术标注

考虑点	决策
位置	字段正下方，紧贴字段（目光流：字段 → 下方反馈）；不放右侧、不放 Tooltip
颜色对比度	Helper Ink-2 5.2+、Error #A02C2C 6.8、Success #3D7A44 4.8+（均达 WCAG AA）
换班	Helper / Error / Success 共用一个槽位，替换不叠加
布局稳定	反馈行预留高度，出现/消失不推挤下方内容
图标	内联 SVG（stroke 2px、currentColor），禁 emoji
可访问性	Helper 用 aria-describedby；Error 加 role=“alert” + aria-invalid；Success 用 role=“status”

什么时候用这个词

做设计决策时

场景：注册表单的密码字段

用户旅程逐步走：

未聚焦 / 聚焦中   → Helper：「至少 8 个字符」（中性色，预防犯错）
输入 abc12 后离开 → Error：「密码至少 8 个字符，还差 3 个」
                    （错误色文字 + 边框变红 + role="alert"）
补到 8 位         → 回到 Helper 或直接沉默（普通字段不需要绿勾）

对比：用户名字段（需要查服务器才知道可不可用）
校验通过          → Success：「✓ 该用户名可用」（真实焦虑，确认有价值）

给 agent 发指令时

不要只说「加个错误提示」——说清三种身份和换班规则：

给密码字段加验证反馈：
1. 默认显示 Helper「至少 8 个字符」（次要色 #6B675F，字段下方）
2. Blur 校验失败时同一位置换成错误信息（#A02C2C，文案含还差几位），
   边框同步变红，加 role="alert" 和 aria-invalid
3. 修正后换回 Helper；反馈行预留高度，出现消失不许挤动布局

常见错误

错误 1：把规则塞进 placeholder 当 Helper

<input placeholder="至少 8 个字符，含大小写和数字" />

用户一开始输入，规则就消失了——填到第 6 位忘了还要不要数字。
正确做法：规则放字段下方的 Helper Text，全程可见。

错误 2：只变边框不给文字

校验失败 → 边框变红，没有任何文字。

色弱用户：什么都没发生。
其他用户：红了，但错在哪？格式？长度？已被占用？
正确做法：颜色 + 文字双通道，文案说清怎么改。

错误 3：Helper 和 Error 同时显示

│ 至少 8 个字符          │ ← Helper 还在
│ 密码太短               │ ← Error 又来
两行小字打架，用户不知道看哪行。
正确做法：同一槽位替换——出错时 Error 顶替 Helper。

错误 4：错误信息藏在 Tooltip 里

字段变红，错误文案要 hover 图标才显示。

移动端没有 hover；键盘用户够不到；用户根本不知道要去 hover。
正确做法：错误直接显示在字段下方，不需要任何额外操作。

错误 5：反馈出现时布局跳动

错误文字插入 → 下方所有内容向下挤一行 → 用户正要点的按钮跳走了。

正确做法：反馈行预留固定高度（min-height），出现/消失只换内容不换布局。

相关词条

• №03「表单结构与校验」 — 什么时候校验（三层时机）；本词条管反馈长什么样
• №03「输入框最佳实践」 — 字段本身的状态设计（focus / filled / disabled）
• №04「提示（怎么选）」 — 跨字段的表单级错误汇总用 Alert，操作结果用 Toast
• №03「按钮怎么选」 — 提交按钮的 Loading / Disabled 态与校验反馈联动

完整可复制的 Prompt

给注册表单的「用户名」和「密码」两个字段设计完整的验证反馈。

三种反馈（同一槽位，替换不叠加）：
1. Helper Text（默认）：
   - 用户名：「4-20 个字符，可用字母数字下划线」
   - 密码：「至少 8 个字符」
   - 次要色 #6B675F，12-13px，字段正下方，aria-describedby 关联
2. Error Message（校验失败，Blur 触发）：
   - 同一位置替换 Helper；文字 #A02C2C + 边框同步变色
   - 文案含修复方法（「还差 N 个字符」）
   - role="alert" + aria-invalid="true"
3. Success Feedback（仅用户名——模拟服务器可用性检查通过后）：
   - 「该用户名可用」+ 内联 SVG 对勾（stroke 2px），#3D7A44
   - role="status"；密码字段通过后保持沉默（不打绿勾）

布局与细节：
- 反馈行预留高度，出现/消失不得推挤布局
- 所有颜色对白底对比度 ≥ 4.5:1（WCAG AA）
- 禁用 emoji，图标一律内联 SVG

输出：HTML + CSS（三种状态）+ JS（换班逻辑）+ 使用说明。

为什么这个决策很重要

字段下方那行小字，是用户在表单里读得最多的文案——比标题读得多，比按钮文案读得多。

• Helper 缺位：用户靠试错学规则，每错一次消耗一次耐心
• Error 只有颜色没有文字：用户知道错了但不知道怎么改，反复试到放弃
• 三种身份混用（没填就红字、满屏绿勾）：反馈系统失去公信力，用户开始无视它

一句话：验证提示是表单的「语气」——引导时中性、纠错时具体、确认时克制，用户才会信任这张表单。