错误提示必须紧跟对应<input>后，用<div class="error" role="alert" aria-live="polite">包裹，禁用display: none而用visibility: hidden，动态同步aria-invalid等属性，禁用title和placeholder承载错误文案。
错误信息必须插在 <input> 后面，不能塞进 <label>
DOM 位置错了，屏幕阅读器就找不到错误。插在 <label> 里会破坏语义，语音播报可能跳过或重复；插在父容器末尾则视觉动线断裂，用户扫一眼根本对不上哪个字段出错。
- 每个
<input>后紧跟一个<div class="error" role="alert" aria-live="polite"></div> - 用 CSS 控制
display: block和margin-top，避免行内元素换行错位 - 别用
aria-describedby指向远距离的元素——ID 对得上也没用，焦点切换时语音反馈常失效
隐藏错误提示别用 display: none，改用 visibility: hidden
display: none 会导致布局重排，输入框上下元素“抽搐”；而 visibility: hidden 保留占位，视觉稳定，也兼容屏幕阅读器对 role="alert" 的播报逻辑。
- 清空提示文案后，务必同步重置
visibility: hidden，否则后续报错不显示 - 多个字段共用同一段 JS 验证逻辑时，别写
document.querySelector(".error")——永远只改第一个；改用el.dataset.errorTarget精准定位 - 表单提交批量验证时，必须对每个字段单独控制对应提示的显隐，否则所有提示一起弹出或一起消失
setCustomValidity() 不是“设完就显示”，必须配 reportValidity() 或提交触发
只调 el.setCustomValidity("手机号格式错误")，UI 不会变；它只是改了 validity 状态，不触发浏览器反馈。原生验证只在 submit 时批量检查，JS 赋值、粘贴、空值判断全都不管。
- 监听
input事件时，先调el.setCustomValidity("")清空旧状态，再根据规则重设 - 想实时提示？手动调
el.reportValidity()，但注意：它会弹原生气泡，破坏 UI 一致性 - 更稳妥的做法是结合
checkValidity()+ 自定义 DOM 提示，完全绕开气泡
禁用 title 和 placeholder 承载错误文案
title 是悬停提示，移动端基本不可用；placeholder 在 focus 后就消失，用户正在输入时根本看不到错误。两者都不符合 WCAG 2.1 中“错误信息必须持久可见、与控件明确关联”的要求。
立即学习“前端免费学习笔记（深入）”；
-
title只能用于补充说明，不能承载必现错误文案 -
placeholder仅作格式示意（如"yyyy-mm-dd"），绝不可写"请输入邮箱"或"密码太短" - 真正错误文案必须是独立 DOM 节点，且用
role="alert"或aria-live="polite"
aria-invalid、aria-errormessage、required 属性都得随 JS 校验结果动态更新，否则键盘用户和屏幕阅读器感知不到变化。 
