原生验证气泡位置不可控，因其由浏览器引擎根据视口、滚动、transform等自动计算；应禁用后用JS+aria-live自定义提示，且服务端字段名须与前端input name严格一致。
原生验证气泡为什么总在奇怪位置弹出
浏览器原生验证气泡（比如 Chrome 的灰色提示框）不是靠 CSS 定位的，它由浏览器内部渲染引擎控制，位置取决于 input 元素当前的视口位置、滚动状态、z-index 层级甚至是否被 transform 或 overflow 遮挡。你没法用 top/left 精确干预，强行加 position: relative 或 overflow: hidden 到父容器，反而会让气泡消失或错位。
常见翻车点：
- 给
form加了transform: scale(0.95)→ 气泡偏移或不显示 -
input套在display: flex容器里且设了align-items: center→ 气泡垂直居中错乱 - 页面有固定定位的导航栏遮挡顶部 → 气泡被裁剪，只露半截
务实做法：别试图“修复”气泡位置，直接禁用它——用 CSS 隐藏：
input::-webkit-validation-bubble-message { display: none; }
input::-moz-validation-bubble-message { display: none; }
input:invalid { box-shadow: none; }
然后用 JS 自己控制提示 DOM，位置才真正可控。
立即学习“前端免费学习笔记（深入）”；
setCustomValidity() 调了但 :invalid 伪类没变
setCustomValidity() 只设置 validity 状态，不触发 UI 更新。浏览器不会自动刷新 :invalid 样式，除非你显式调用验证方法。
必须搭配 checkValidity() 才生效：
- 对单个字段：先
input.setCustomValidity("不能为空")，再input.checkValidity() - 对整个表单：
form.checkValidity()会触发所有已注册字段的:invalid计算，但不保证每个字段都重新跑checkValidity() - 如果字段之前没被验证过（比如用户还没输过、也没 blur 过），
:invalid就一直不会激活
注意：reportValidity() 也会触发 :invalid，但它同时弹气泡——如果你已经禁用了气泡，就别用它来单纯更新样式。
错误提示 DOM 插入后读屏器不读
动态插入的错误文案，读屏器（如 NVDA、VoiceOver）默认不感知，除非你明确告诉它：“这里有新内容，要读”。aria-live="polite" 是必需的，但它只对**已有 DOM 节点的内容变更**有效；如果是新 appendChild()，得确保该节点本身带 aria-live，且插入后不重写整个 innerHTML。
正确结构示例：
<input name="email" data-error-target="#error-email"> <div id="error-email" class="error" role="alert" aria-live="polite"></div>
后续 JS 只做：
-
errorEl.textContent = "邮箱格式不对"（不是innerHTML = "..."） -
errorEl.style.visibility = "visible"（用visibility，不是display: none） -
input.setAttribute("aria-invalid", "true")和input.setAttribute("aria-describedby", "error-email")
漏掉任意一项，读屏器就可能跳过或重复播报。
服务端返回字段错误后提示错位
后端返回的错误对象（如 {"phone": ["手机号已被注册"]}）和前端 DOM 的 name 必须完全一致——包括大小写、下划线、连字符。哪怕后端返回 "Phone"，而前端 input 是 name="phone"，JS 就找不到对应节点。
实操建议：
- 统一约定：服务端字段名全部小写 + 下划线（
user_name），前端input[name="user_name"]严格对齐 - 插入前先清空所有旧提示：
form.querySelectorAll("[data-error-target]").forEach(el => el.textContent = "") - 遍历后端错误对象时，用
document.querySelector(`input[name="${key}"]`)查找字段，再通过dataset.errorTarget找到对应提示容器 - 找不到匹配
input时，不要静默吞掉错误——至少 console.warn，避免问题被掩盖
最易被忽略的点是：服务端字段名和前端 name 不一致时，JS 不报错，只是提示不出现，排查起来毫无痕迹。
