加novalidate属性可彻底禁用表单原生校验弹窗，它必须写在form标签上、写即生效，不影响js手动校验；写在input上无效，preventdefault()无法阻止前置校验弹窗，ios safari横幅提示同样受其控制。
form 标签加 novalidate 属性就能禁用默认校验弹窗
浏览器对 required、type="email" 等表单控件触发的红色气泡提示（如“请填写此字段”），本质是 HTML5 内置表单验证 UI。最直接有效的关闭方式，就是在 form 元素上添加 novalidate 属性——它会完全跳过浏览器的原生校验逻辑，包括提交时的拦截和弹窗。
注意：novalidate 是布尔属性，写上即生效，无需赋值；也不影响你后续用 JavaScript 手动校验。
-
novalidate必须加在form标签上，加在input上无效 - 即使 input 有
required或pattern，加了novalidate后点击提交也不会弹窗 - 该属性兼容所有现代浏览器（Chrome/Firefox/Safari/Edge），无兼容性风险
想保留部分校验但隐藏弹窗？用 setCustomValidity('') 清空错误状态
如果只是想关掉弹窗，又不希望彻底放弃浏览器校验（比如仍想利用 checkValidity() 做 JS 判断），可以手动清空每个字段的校验错误消息。关键方法是调用 setCustomValidity('')，传空字符串表示“当前无自定义错误”，同时也会抑制默认弹窗触发。
典型场景：用户输入后实时校验，出错时用自定义 UI 提示，但不想让原生气泡抢镜。
- 必须在每次校验逻辑执行后调用，例如
input.addEventListener('input', () => { el.setCustomValidity(''); }) - 若要主动标记错误，需传非空字符串，如
el.setCustomValidity('邮箱格式不对') - 仅调用
setCustomValidity('')不会重置validity.valid状态，底层校验仍存在
submit 事件中调用 event.preventDefault() 不能替代 novalidate
有人试图在 form 的 submit 事件里写 event.preventDefault() 来阻止弹窗，这是无效的。因为默认校验弹窗发生在事件触发前——浏览器先校验、弹窗、阻断提交，根本不会走到你的 JS submit 回调里。
换句话说：弹窗不是 submit 事件的副作用，而是 submit 的前置守门员。
-
preventDefault()只能阻止提交行为本身，无法干预校验阶段 - 如果你加了
novalidate，submit 事件才一定会被触发，这时preventDefault()才有意义 - 混淆这两者会导致“为什么我的 submit 回调没执行？”这类问题
移动端 iOS Safari 的特殊表现：弹窗可能变成键盘上方横幅
iOS Safari 对表单校验的 UI 实现和桌面端不同：它通常不弹气泡，而是在软键盘上方显示一行红色文字（如“请填写此字段”），且会自动聚焦到第一个违规字段。这个横幅同样受 novalidate 控制，加了就消失。
但要注意一个易忽略点：iOS 有时会缓存表单状态。如果之前没加 novalidate 触发过校验，之后加上并刷新页面，横幅仍可能残留一次。硬刷新（Cmd+Shift+R 或长按刷新按钮）可解决。
- 不要依赖 CSS 隐藏横幅（如
input:invalid { ... }），iOS 不响应这类伪类 - 如果用了第三方表单库（如 Formik），确认它没在内部动态移除/添加
novalidate - 真机测试比模拟器更可靠，特别是 iOS 16+ 对
novalidate的处理更严格
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
