表单校验提示不显示，主因是event.preventDefault()未置于submit事件处理器首行或未调用checkValidity()；reportValidity()需元素可见、可交互且非disabled；setCustomValidity()需配合checkValidity()或reportValidity()触发UI更新。
表单校验提示不显示，八成是 event.preventDefault() 没放在 submit 事件处理器第一行，或者根本没调 checkValidity() —— 浏览器原生验证只在未被拦截的提交流程中自动弹气泡，JS 一拦就全失效。
submit 事件里 preventDefault() 必须写在最开头
只要你在 form.addEventListener("submit", handler) 中用了 event.preventDefault()，它就必须是函数体第一行。否则验证失败时页面照常刷新，错误提示根本来不及渲染。
- 错误写法：
if (!form.checkValidity()) { ... }写在preventDefault()前面 → 验证失败直接跳转，JS 逻辑没执行到 - 正确写法：
e.preventDefault();紧跟function(e) {后，再做校验和提示逻辑 - 内联写法
onsubmit="return false"能绕过，但不可维护，不推荐
reportValidity() 不弹提示？先看元素是否“可见且可交互”
reportValidity() 只对当前处于 DOM 中、未被 display: none 或 visibility: hidden 隐藏、且未 disabled 的元素生效。iOS Safari 还额外要求元素必须有焦点或已触发过用户交互（如点击）。
- 常见坑：用 CSS 把 input 设为
opacity: 0或position: absolute; left: -9999px→reportValidity()静默失败 - 移动端建议：失焦（
blur）时就调input.checkValidity()，并手动更新aria-invalid和提示文案，别等 submit - 别对整个
form调reportValidity()—— 它不会聚焦第一个错项，用户可能看不到气泡
setCustomValidity() 设了但没反应？检查三件事
这个 API 不是“设完就显示”，它只改元素内部的 validity 状态，UI 反馈要靠后续触发验证动作来驱动。
立即学习“前端免费学习笔记（深入）”；
- 必须传空字符串
""才算清除错误；传null、undefined或空格都会被当错误处理 - 设完后不调
checkValidity()或reportValidity()，:invalid伪类不会更新，边框/颜色也不变 - 如果表单加了
novalidate属性，所有原生验证行为（包括reportValidity()）都会被禁用
后端返回 400，前端塞不进对应 input？字段名映射和清理是关键
后端返回的错误字段名（如 {"user_email": ["邮箱已被注册"]}）必须和前端 input[name] 完全一致（区分大小写、下划线/驼峰），且每次渲染前必须清空旧提示。
- 服务端字段名和
input[name]不一致 → JS 找不到目标节点，提示无处安放 - 没清空旧提示：
form.querySelectorAll(".error-message").forEach(el => el.remove())缺失 → 错误堆叠、定位错乱 - 提示容器必须紧跟在对应
input后（如nextElementSibling），并加aria-live="polite"保证读屏器可感知
最容易被忽略的是：表单元素是否真实挂载在文档中。动态创建的 form 如果没用 appendChild() 插入到页面已有容器里，form.isConnected 为 false，所有原生验证（required、type="email"）全部静默失效，控制台还会报 “Form submission canceled because the form is not connected”。
