错误信息应插在input后面（同级兄弟节点），而非label内或父容器末尾；需用独立dom节点、role="alert"或aria-live="polite"确保可访问性，禁用title和placeholder承载错误文案。
错误信息该插在 input 后面还是 label 里？
插在 <input> 后面（同级兄弟节点）是唯一可靠做法。label 里塞错误文案会破坏语义，且屏幕阅读器可能跳过或重复播报；放在父容器末尾则容易脱离输入控件的视觉动线，用户扫视时找不到对应关系。
实操建议：
- 每个
<input>后紧跟一个<span class="error"></span>或<div class="error"></div> - 用 CSS 的
display: block和margin-top控制垂直间距，避免行内元素换行错位 - 不要用
aria-describedby指向一个不在 DOM 邻近位置的元素——即使 ID 对得上，焦点切换时语音反馈也常失效
如何让错误提示只在验证失败时出现又不闪跳？
靠 CSS 的 visibility: hidden + JS 切换类名，而不是 display: none。后者会导致布局重排，输入框上下元素“抽搐”；visibility 保留占位，视觉更稳。
常见错误现象：
- 用
innerHTML = ""清空提示后没重置 visibility，导致后续报错不显示 - 多个字段共用同一段 JS 验证逻辑，但错误元素选择器写成
document.querySelector(".error")，永远只改第一个 - 表单提交时批量验证，但没对每个字段单独控制对应提示的显隐，结果所有提示一起弹出或一起消失
推荐写法：给每个 <input> 加 data-error-target="#error-username"，JS 里用 el.dataset.errorTarget 精准定位。
用 title 属性或 placeholder 显示错误行不行？
不行。title 是悬停提示，移动端基本不可用；placeholder 在 focus 后就消失，用户正在输入时根本看不到错误。两者都不符合 WCAG 2.1 中“错误信息必须持久可见、与控件明确关联”的要求。
使用场景限制：
-
title只能用于补充说明，不能承载必现错误文案 -
placeholder仅作格式示意（如 “yyyy-mm-dd”），绝不可写 “请输入邮箱” 或 “密码太短” - 真正错误文案必须独立 DOM 节点，且用
role="alert"或aria-live="polite"告知辅助技术
为什么有些浏览器原生验证的气泡提示关不掉？
因为 novalidate 只禁表单提交校验，不关 input 自身的 required/type="email" 等触发的气泡。要彻底屏蔽，得加 CSS：
input:invalid { box-shadow: none; }
input::-webkit-validation-bubble-message { display: none; }
但更务实的做法是：不用原生验证，自己用 setCustomValidity("") 清空默认提示，再统一走 JS 验证流程。否则 iOS Safari 和旧版 Edge 的气泡行为差异极大，调试成本远高于手写提示逻辑。
容易被忽略的一点：哪怕你写了完整自定义验证，也要在 input 上保留 required 属性——它仍影响表单的 :valid/:invalid 伪类和可访问性状态，只是不触发原生气泡而已。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
