定位：状态、文案、时机，三件事定死

表单的所有争议都在这三处：输入框长什么样、提示说什么、什么时候说。

一、输入框八态（必须全覆盖）

focus ring 的实现（不要用 outline）

.input:focus {
  outline: none;
  border-color: #1677ff;
  box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.2);   /* 用 shadow 而不是 outline */
  transition: border-color .15s, box-shadow .15s;
}

为什么不用 outline：outline 不占布局但无法做圆角、无法控制偏移、部分浏览器样式不一致。box-shadow 可控且不引起重排。

过渡参数（统一，不要每处不同）

不要用抖动动画（transform: translateX 左右晃）——廉价感强，且会让用户觉得被指责。

二、三层文案，各司其职（最容易混）

三条硬规则

① placeholder 不能代替 label

<!-- ❌ 值一填就不知道这是什么字段 -->
<input placeholder="请输入手机号" />

<!-- ✅ -->
<label>手机号</label>
<input placeholder="例如 138 0013 8000" />

placeholder 应该是示例，不是指令。 「例如 138 0013 8000」比「请输入手机号」有用。

② error 和 help text 占同一个位置

// ✅ 固定高度容器，二者互斥显示，布局不跳
<div className="field-footer" style={{ minHeight: 22 }}>
  {error ? <span className="error">{error}</span> : <span className="help">{help}</span>}
</div>

布局跳动是表单最常见的体验问题：报错时下面所有字段往下推，用户正在填的那个跑了。

③ 文案要具体可执行

三、必填标记

规则

• 只标必填，不标选填（除非选填占多数）
• 星号 * 放在 label 前：* 手机号
• 星号颜色 #ff4d4f，但要加无障碍文本

<label>
  <span aria-hidden="true" style={{ color: '#ff4d4f' }}>*</span>
  <span className="sr-only">必填</span>
  手机号
</label>

「sr-only」不能省：读屏用户听不到星号，必须给文本。

反过来：选填多于必填时

比如"完善资料"页 12 个字段只有 2 个必填——这时标「(选填)」更省视觉噪音，标题旁加一句「带 (选填) 的可稍后填写」。

四、校验时机（做错最多的地方）

四个时机，各管一件事

为什么 onChange 不报错

用户输 138 时提示"手机号格式错误"——他还没输完。这是最招人烦的体验。

正确做法：

const [touched, setTouched] = useState(false)

onChange: (e) => {
  setValue(e.target.value)
  if (touched && error) setError(null)      // 已报过错 → 输入时立即清除
}
onBlur: () => {
  setTouched(true)
  validate(value)                            // 第一次校验
}

提交时的两个细节

① 滚动到第一个错误字段并 focus

const firstError = document.querySelector('.ant-form-item-has-error input')
firstError?.scrollIntoView({ block: 'center', behavior: 'smooth' })
;(firstError as HTMLInputElement)?.focus()

不滚动的话，字段多时用户看不到哪里错了。

② 多个错误时用顶部 Alert 汇总

字段超过 6 个且错误不止一处时，顶部加一条：

表单有 3 处需要修改

点击可跳转到对应字段。

五、特殊输入

验证码分栏输入的关键行为

// 粘贴 "1234" 应填满四格，不是只填第一格
onPaste: (e) => {
  const text = e.clipboardData.getData('text').replace(/\D/g, '').slice(0, 4)
  if (text) { fillAll(text); e.preventDefault() }
}
// 输入后自动 focus 下一格；Backspace 空格时回退上一格

六、移动端表单

键盘类型（用 inputmode，不要靠 type 猜）

<input inputmode="numeric">     <!-- 数字键盘，但仍可输入前导 0 -->
<input inputmode="tel">         <!-- 电话键盘 -->
<input inputmode="email">       <!-- 带 @ 的键盘 -->
<input inputmode="decimal">     <!-- 带小数点的数字 -->

type="number" 的坑：会丢前导 0、滚轮会改值、移动端键盘不一定有小数点。用 inputmode + type="text"。

autocomplete 一定要写

<input autocomplete="username">
<input autocomplete="current-password">
<input autocomplete="new-password">
<input autocomplete="one-time-code">
<input autocomplete="tel">

不写的话，密码管理器无法识别，用户每次手输。

七、提交按钮

• 文案用动词：「登录」「保存」「创建订单」，不要「提交」「确定」
• 提交中：loading + 禁用 + 文案变「登录中…」
• 防重复提交：提交瞬间置 submitting 标志，成功/失败后才解除
• 失败后按钮恢复可点，不要卡死
• 危险操作按钮用 danger

八、验收清单

• 八种状态都有明确视觉，focus 用 box-shadow 而非 outline
• 过渡统一 150ms，无抖动动画
• 每个字段都有 label，placeholder 是示例不是字段名
• error 与 help text 占同一位置，报错时布局不跳动
• 必填星号在 label 前 + 有 sr-only 文本
• onChange 不报新错，onBlur 才校验格式
• 异步校验有 500ms debounce + loading
• 提交时滚动到第一个错误字段并 focus
• 密码有显示/隐藏切换
• 验证码支持整串粘贴
• 移动端 label 顶部对齐、输入框 48 高、字号 ≥16
• inputmode 与 autocomplete 都写了
• 提交按钮有 loading 与防重复提交

九、反面清单

1. ❌ 用 placeholder 当 label
2. ❌ 输入过程中实时报「格式错误」
3. ❌ 报错时把下方字段往下推（布局跳动）
4. ❌ 用抖动动画提示错误
5. ❌ 密码框没有显示/隐藏
6. ❌ 验证码不能整串粘贴
7. ❌ 移动端 type="number" 导致丢前导 0
8. ❌ 不写 autocomplete，密码管理器失效
9. ❌ 提交按钮无 loading，用户点三次
10. ❌ 错误文案写「操作失败」不写原因
11. ❌ 登录失败区分「账号不存在」和「密码错误」（可枚举用户）