setCustomValidity() 需配合 reportValidity() 主动触发UI，传非空字符串使 checkValidity() 返回 false；invalid 事件是拦截原生气泡的唯一时机，须 preventDefault() 并同步更新 aria-invalid、CSS 类与错误文案。
怎么让 setCustomValidity() 真正生效
它不是“设个提示就完事”，而是直接修改字段的 validity.customError 状态。传空字符串 '' 表示通过，传任何非空字符串（哪怕只是空格 ' '）都会让 checkValidity() 返回 false，并触发浏览器默认气泡——除非你提前用 preventDefault() 拦住。
常见错误现象：调了 setCustomValidity('邮箱格式不对') 却没弹提示；或提示弹了但位置偏移、一闪而过。
- 必须配合
reportValidity()主动触发 UI，不能只靠用户点提交 -
reportValidity()对隐藏元素（display: none或visibility: hidden）静默失败，改用aria-hidden="true"+tabindex="-1" - 动态插入的 input（如 Vue/React 渲染后）要等 DOM layout 完成再调，可用
requestAnimationFrame()包一层 - 别在
submit事件里才设，那时验证已执行完毕；应在input或blur时实时更新
为什么 invalid 事件总被忽略
这个事件在浏览器判定字段无效时**立即触发**，且在原生气泡弹出前，是唯一能用 preventDefault() 拦截的时机。但它不冒泡，也不重发——哪怕你刚调了 setCustomValidity()，只要最终状态是无效，它就只触发一次。
典型误用：只监听 submit，结果用户填错邮箱离开焦点时没反馈；或监听了却忘了清空旧错误文案。
立即学习“前端免费学习笔记（深入）”；
- 在
invalid回调里必须e.preventDefault()，否则原生气泡和你的提示会同时出现 - 同步更新对应 DOM 节点，比如
document.querySelector('.error-email').textContent = '请填写正确的邮箱地址' - 在
input或blur事件中，一旦输入合法，立刻调e.target.setCustomValidity('')并清除 UI 错误提示 - 别指望它自动更新
:invalidCSS 类——要手动el.classList.toggle('error', !el.checkValidity())
如何避免自定义验证和原生验证打架
两者能共存，但容易状态脱节：比如用户粘贴一段非法邮箱，type="email" 自动标为无效，但你的 JS 没监听 input，setCustomValidity() 还是旧值，validity.valid 和 UI 样式就不一致。
最常踩的坑是只监听 input，漏掉粘贴、拖入、自动填充等场景。
- 必须同时监听
input和change：前者捕获键入，后者覆盖粘贴/自动填充 - 每次校验结束，同步设置
el.setAttribute('aria-invalid', !el.checkValidity()) - 禁用原生气泡后（
oninvalid="event.preventDefault()"），务必维护一个aria-live="polite"区域，否则屏幕阅读器收不到提示 -
required只检查是否为空字符串，不校验内容；type="email"允许user@localhost，别当成 RFC 合规校验
提交时聚合所有错误而不是逐个弹窗
用户点提交按钮，你要一次性展示全部字段问题，而不是等一个气泡关了再弹下一个。这时别依赖单个 invalid 事件，得主动遍历校验。
常见错误：用 form.addEventListener('submit', ...) 里一个个 reportValidity()，结果只聚焦第一个错位，其余没提示。
- 用
form.checkValidity()先整体判断，返回false再遍历form.elements - 对每个元素调
el.checkValidity()，收集错误文案到数组，统一渲染到页面顶部或各字段旁 - 别调
el.reportValidity()—— 它会强制聚焦并弹气泡，破坏你设计的聚合提示流 - 校验完记得滚动到第一个错误字段：
elements[0].scrollIntoView({ behavior: 'smooth', block: 'center' })
customError，也没同步更新 aria-invalid 和 class，导致辅助技术失效、样式错乱、甚至表单提交行为不可预测。 
