setCustomValidity()仅设置错误文案而不触发验证，需配合reportValidity()或submit事件才能显示；清空必须用空字符串''；禁用默认气泡需在invalid事件中preventDefault()；提交时应遍历elements收集validationMessage并聚合展示。
setCustomValidity() 是唯一能接管浏览器默认提示文案的接口，但它不自动触发验证、不重置状态、也不渲染 UI —— 所有这些都得你手动补全。
为什么只调 setCustomValidity() 没反应
常见现象：写了 input.setCustomValidity('邮箱格式不对')，但提交时还是弹系统默认提示，甚至完全没提示。根本原因在于这个方法只设置“失败时该显示什么”，不触发校验流程，也不改变 UI 状态。
- 必须配合
reportValidity()（手动触发气泡）或表单submit事件（自动触发）才能让文案真正出现 -
checkValidity()只返回true/false，调了也不会弹窗、不会标红、不会聚焦 - Safari 15.4+ 才修复
reportValidity()对自定义文案的支持；旧版 Safari 会静默忽略 - 如果字段是
display: none或visibility: hidden，reportValidity()直接不显示提示
setCustomValidity('') 怎么才算真正清空
传空字符串 '' 是唯一有效的重置方式。传 null、undefined、甚至一个空格 ' '，都会被当错误处理，导致字段永远验证失败。
- 错误写法：
input.setCustomValidity(null)、input.setCustomValidity(' ') - 正确节奏：输入合法 →
input.setCustomValidity('')→input.reportValidity()（可选，用于立即刷新 UI） - 注意：即使你清空了自定义文案，若字段仍有
required或type="email"等原生规则，仍可能因那些规则失败而报错 —— 你的逻辑需覆盖所有分支
怎么禁用原生气泡，改用手动 DOM 渲染
浏览器默认气泡无法用 CSS 修改样式，也不能定位到页面任意位置。想统一风格，就得在 invalid 事件里拦截并阻止它。
立即学习“前端免费学习笔记（深入）”；
-
invalid事件在浏览器判定“无效”后、气泡弹出前触发，可用e.preventDefault()阻止 - 它不冒泡，且只在“最终验证结果为无效”时触发 —— 即使你刚调过
setCustomValidity('')，只要最终状态是有效，就不会再发 - 典型用法：
email.addEventListener('invalid', e => { e.preventDefault(); document.querySelector('.error-email').textContent = email.validationMessage; }) - 别忘了同步清理：当输入变合法时，除了
setCustomValidity('')，还得手动清空 DOM 中的提示文字和.error类
提交时批量收集错误并聚合展示
用户点“提交”，你不想让它一个个弹气泡，而是把所有错误集中展示在顶部或各字段旁。
- 第一步：
e.preventDefault()阻止默认提交和默认提示 - 第二步：
form.checkValidity()判断整体是否通过（仅返回布尔值） - 第三步：遍历
form.elements，对每个!el.checkValidity()的元素，读取el.validationMessage - 注意：
validationMessage的内容取决于你是否设过setCustomValidity()：设过就返回你写的文案；没设过就返回浏览器默认文案；设过又清空了，它就是空字符串 - 最后一步：把所有非空
validationMessage渲染到目标容器，比如<div id="form-errors"></div>
最容易被忽略的是：自定义验证状态有“粘性”——一旦设过非空文案，不显式调 setCustomValidity('')，它就一直卡在失败态，哪怕输入完全合法。这不是 bug，是设计如此；但多数人第一次踩坑时都以为是 JS 逻辑错了。
