直接用setCustomValidity()设非空字符串可接管浏览器默认提示，传空字符串''才能清除错误；需调reportValidity()或表单提交触发显示，并在invalid事件中preventDefault()禁用原生气泡。
直接用 setCustomValidity() 设置非空字符串，再配合 reportValidity() 或表单提交触发显示——不是“覆盖”，而是“接管”：浏览器一旦看到你设了非空字符串，就放弃默认文案，改用你写的那句。
setCustomValidity() 怎么设才有效
每个可验证控件（input、select、textarea）都有这个方法，但行为很严格：
- 传非空字符串（如
'手机号格式不正确'）→ 元素立即变为无效状态，validationMessage就是你设的这句话 - 必须传
''（两个单引号，空字符串），才能真正清除错误、恢复校验逻辑 - 传
null、undefined、空格（' '）都会被当错误处理，导致字段一直 invalid - 常见写法是在
input或blur事件里动态判断并设置，输入合法后立刻调setCustomValidity('')
为什么调了 setCustomValidity() 却没提示弹出来
setCustomValidity() 只改状态，不触发 UI 显示。必须主动触发验证流程：
- 调
reportValidity()：立即显示气泡提示，适合失焦、按钮点击等非提交场景 - 在
submit事件中调用：e.preventDefault()阻止默认行为，再用form.checkValidity()判断，失败则对各字段调reportValidity()或手动收集错误 - 若表单加了
novalidate属性，或控件被disabled，reportValidity()会静默失效
怎么禁用原生气泡，改用手动 DOM 提示
浏览器默认气泡无法用 CSS 修改样式，想统一风格就得禁用它：
立即学习“前端免费学习笔记（深入）”；
- 监听
invalid事件，在里面调e.preventDefault()，阻止气泡弹出 - 把
el.validationMessage写进页面指定区域（比如字段下方的<div class="error"></div>） - 提交时可遍历所有表单元素，批量收集错误文案，集中展示在顶部或各字段旁
- 别忘了清空错误时同步移除 DOM 中的提示文字，以及用 JS 手动移除
.error类（:invalid:user-invalid伪类不会自动消失）
required 属性能直接设错误文案吗
不能。required 是纯语义布尔属性，不承载文案逻辑。浏览器生成的提示（如“请填写此字段”）由系统语言和内部翻译表决定，HTML 和 CSS 都无法干预。
- 常见误解是以为加
title或placeholder能影响提示，实际无效 - 若仍想保留
required的语义，可保留该属性，但需在 JS 中初始化调用element.setCustomValidity('')，否则它会和原生校验冲突 - 移动端 Safari 对
reportValidity()的调用时机较敏感，建议在form.submit事件中统一校验，而非依赖按钮 click
最容易被忽略的是：清空错误必须用 setCustomValidity('')，且要和 UI 更新（移除 class、清空 DOM 文本）同步做；否则用户看到字段已填对，但错误提示还挂着，或者样式没变，体验就断了。
