oninvalid事件仅提供验证失败的触发时机，真正决定气泡文案的是setCustomValidity()：传非空字符串设为无效并显示该文案，传空字符串''才表示通过；必须配合reportValidity()或提交动作才能触发原生气泡显示。
oninvalid 事件本身不控制气泡内容，得靠 setCustomValidity()
浏览器默认的 oninvalid 只是触发时机，真正决定校验失败时显示什么文字的，是 setCustomValidity() 方法。调用它传入非空字符串，表单控件就会进入“无效”状态，并在调用 reportValidity() 或提交时显示该字符串；传入空字符串（''）才表示“校验通过”。oninvalid 里不调用它，或只调用 setCustomValidity('')，都不会弹气泡。
常见错误现象：
写了 oninvalid="alert('错了')"，但没改校验状态 → 气泡不出现，只弹 alert
写了 setCustomValidity('用户名不能为空') 但没清空 → 后续输入再 valid() 也不恢复 → 表单永远报错
- 必须在
input或blur时调用setCustomValidity('')清除错误态 -
oninvalid适合做“仅展示提示”的逻辑，比如聚焦到错误字段、加红边框，但不能靠它改提示文本 - 提示文案最终由最后一次非空的
setCustomValidity()决定，和oninvalid里写什么都无关
如何让自定义文案出现在原生气泡里
只要确保：控件处于无效态 + 有非空 setCustomValidity() 值 + 触发了校验（如点击 submit 或调用 reportValidity()），浏览器就会把那个字符串塞进原生气泡——不需要额外 DOM 操作，也不需要 polyfill。
示例（邮箱校验）：
立即学习“前端免费学习笔记（深入）”；
<input type="email"
oninput="this.setCustomValidity('')"
oninvalid="if(this.value=='') this.setCustomValidity('邮箱不能为空');
else if(!this.validity.valid) this.setCustomValidity('邮箱格式不正确');"
required>
注意点：
• oninput 清空错误态，避免残留
• oninvalid 中根据 validity 对象细分错误原因
• 不要写 oninvalid="this.setCustomValidity(...); return false;" ——return false 会阻止默认气泡
兼容性与移动端表现差异
Chrome / Edge / Safari（macOS/iOS）都支持用 setCustomValidity() 替换气泡文案；Firefox 在桌面端也支持，但旧版 Android WebView（≤4.4）可能忽略自定义文案，只显示“请填写此字段”。
- iOS Safari 的气泡位置固定在控件上方，无法调整；Android Chrome 有时在下方，取决于空间
- 如果同时用了
title属性，某些浏览器（如旧版 Firefox）可能优先显示title而非自定义文案 - 不要依赖气泡样式定制——所有浏览器都不允许 CSS 选择或修改原生气泡 DOM
想完全接管提示？那就别用原生气泡
如果需要图标、多行文案、动画、点击关闭等能力，原生气泡做不到。此时应禁用原生校验（novalidate on form），用 addEventListener('submit', ...) + checkValidity() 手动控制，并用 Element.insertAdjacentHTML 插入自定义提示层。
关键判断点：
• 是否接受浏览器原生交互逻辑（如自动聚焦、空格键重试）→ 是，就用 setCustomValidity
• 是否必须统一 UI 风格或支持无障碍扩展 → 否，则原生气泡足够；是，则必须自己实现提示
容易被忽略的是：哪怕用了自定义提示层，仍建议保留 setCustomValidity() 设置状态，否则屏幕阅读器可能无法感知错误。
