oninvalid事件仅在表单提交时校验失败触发，先显示默认提示气泡再执行，需event.preventDefault()阻止；仅对原生约束和setCustomValidity()生效，须绑定到具体控件而非form；内联写法易覆盖，推荐addEventListener并设useCapture为true以及时拦截；Safari样式支持弱，实时校验应使用input/blur事件。
oninvalid 触发时机和默认行为
oninvalid 是 HTML 表单控件（如 <input>、<textarea>）的原生事件，**只在表单提交时校验失败才触发**，不是实时监听。它不会在用户刚删掉内容、或失焦时自动跑——这点很多人误以为是“实时验证”，结果加了 oninvalid 却没反应。
更关键的是：浏览器会先显示默认提示气泡（比如 Chrome 的“请填写此字段”），然后才触发 oninvalid；如果你不阻止默认行为，自定义逻辑执行完，气泡照常弹。
- 必须配合
event.preventDefault()才能压掉默认提示 - 仅对
required、type="email"等原生约束生效，对自定义setCustomValidity()也有效 - 不能用在
<form>元素上直接监听子元素的 invalid —— 得绑定到具体输入控件
怎么用 oninvalid 调 JS 并阻止默认提示
最简可行写法是内联绑定 + preventDefault()：
<input required oninvalid="this.setCustomValidity('不能为空'); event.preventDefault();" oninput="this.setCustomValidity('')">
注意两个要点：
立即学习“前端免费学习笔记（深入）”；
-
oninvalid里必须调this.setCustomValidity('')以外的非空字符串（哪怕只是空格），否则无效；清空校验要用oninput或onchange回调 -
event在内联 handler 中可直接用，不用写function(e) { e.preventDefault() } - 如果想复用函数，建议写成：
oninvalid="handleInvalid(event, this)"，然后在全局定义function handleInvalid(e, el) { e.preventDefault(); el.setCustomValidity('× 该字段必填'); }
为什么 oninvalid 不如 addEventListener 可靠
内联 oninvalid 看似方便，但实际项目中容易出问题：
- 多个
oninvalid绑定会覆盖，无法叠加 - 无法动态移除，调试时难清理
- SSR 或框架（如 React/Vue）里内联事件可能被忽略或转义
推荐用 JS 原生绑定：
const input = document.querySelector('input[required]');<br>input.addEventListener('invalid', function(e) {<br> e.preventDefault();<br> this.setCustomValidity('请填写手机号');<br>}, true); // 注意 useCapture 设为 true 才能抢在默认行为前拦截
不加 true 参数的话，事件在冒泡阶段触发，此时默认提示已弹出，preventDefault() 就失效了。
兼容性和替代方案要注意什么
oninvalid 在 IE10+、Edge、Chrome、Firefox 都支持，但 Safari 对 setCustomValidity() 的提示样式控制极弱（比如无法隐藏原生气泡边框）。真要统一体验，得放弃原生校验，改用 addEventListener('submit') 拦住整个表单，再手动遍历 checkValidity() 和 validationMessage。
另外，别依赖 oninvalid 做实时反馈——它根本不是为此设计的。实时校验应该用 input 或 blur，而 oninvalid 只适合“提交一刻”的兜底定制。
真正容易被忽略的是：一旦调过 setCustomValidity('xxx')，后续不显式设为空字符串，该字段就永远校验失败。这个状态不会自动重置，连 form.reset() 都不清理它。
