用 invalid 事件加 preventdefault() 可阻止浏览器默认红色提示，同时保留 required 必填逻辑；需绑定到每个 required 输入框，不与 novalidate 混用，且注意 safari 兼容性及 form.submit() 不触发验证。
怎么关掉 required 触发的浏览器默认提示
能关，但不是“禁用验证”，而是阻止浏览器弹出那个浮层式红色提示（比如 Chrome 的“请填写此字段”）。关键在 setCustomValidity('') 和 novalidate 的分工：前者管单个字段的校验反馈，后者管整个表单的原生验证行为。
-
setCustomValidity('')清空自定义错误，但不会影响required本身——字段依然必须填，只是不显示默认提示 -
novalidate加在<form></form>上，会彻底跳过所有原生验证（包括required、type="email"等），后续得自己用 JS 补全逻辑 - 只想要隐藏提示又保留必填逻辑？推荐监听
invalid事件并立即调用event.preventDefault()，再手动控制 UI 反馈
invalid 事件里阻止默认提示最稳妥
这是目前兼容性好、控制粒度细的做法。浏览器在表单提交或 checkValidity() 被调用时，会对不满足 required 的字段触发 invalid 事件，此时它还没弹出提示框，还有机会拦截。
document.querySelectorAll('input[required]').forEach(input => {
input.addEventListener('invalid', e => {
e.preventDefault(); // 阻止默认红框+提示
input.classList.add('error'); // 自己加样式提示
});
});
- 注意：这个事件不会冒泡，必须绑定到具体 input 元素上
- 如果用了
novalidate，invalid事件根本不会触发——别混用 - 移动端 Safari 对
invalid事件支持较晚（iOS 15.4+），老版本需降级处理
为什么不用 title="" 或 CSS 隐藏提示框
有人试过给 input 加 title="" 或用 ::-webkit-validation-bubble 伪元素隐藏，这些方法不可靠：
-
title=""在部分 Chrome 版本里会让提示变成空白框，依然占位闪一下 -
::-webkit-validation-bubble是非标准私有伪元素，Firefox/Edge 完全不识别，且 Chrome 已逐步废弃 - CSS 无法覆盖原生提示的 z-index 和定位逻辑，强行 hack 容易失效或影响可访问性
留心表单提交时的验证时机差异
用户点提交按钮和 JS 调用 form.submit() 行为不同：前者会触发完整验证流程（含 invalid 事件和提示），后者绕过所有 HTML5 验证直接提交。所以如果你用 JS 控制提交，记得手动调用 form.checkValidity() 并处理结果。
立即学习“前端免费学习笔记（深入）”；
- 用户点击
<button type="submit"></button>→ 触发验证 → 可捕获invalid - JS 执行
form.submit()→ 不触发任何验证 →invalid事件完全收不到 - 想统一控制？改用
form.requestSubmit()，它会触发验证但不自动提交，适合拦截后自定义逻辑
required 属性的识别——别为了省事删掉 required 属性。 
