在标签上添加novalidate布尔属性即可全局禁用浏览器默认验证提示（包括required、type="email"等），它仅对生效，不接受值；加了后checkvalidity()仍可用，但reportvalidity()需手动调用才触发ui反馈。
form 表单怎么禁用浏览器默认的 required 提示
直接在 <form></form> 标签上加 novalidate 属性，就能全局关掉所有内置验证提示（包括 required、type="email" 等触发的气泡）。这个属性是布尔属性，写上即生效，不需要赋值。
常见错误是只给某个 <input> 加 novalidate —— 它只对 <form></form> 有效，对表单控件无效。
-
novalidate是表单级开关，不是输入框级 - 加了之后，
checkValidity()和reportValidity()仍可调用，但浏览器不会自动弹出提示 - 如果要用 JS 自定义校验，必须手动调用
reportValidity()才能触发 UI 反馈（否则完全静默）
input 元素如何阻止 focus 后自动弹出验证气泡
即使加了 novalidate，某些浏览器（如 Chrome）在用户点击提交按钮后，若字段不满足 required，仍可能对首个违规字段自动聚焦并显示气泡。这不是 bug，而是浏览器的“辅助聚焦”行为。
要彻底避免这种自动聚焦和气泡，得在提交时拦截默认行为，并手动控制焦点逻辑：
form.addEventListener('submit', e => {
e.preventDefault();
if (!form.checkValidity()) {
// 不调用 reportValidity()，也就不会弹气泡、不会自动聚焦
// 改为手动高亮或提示
highlightInvalidFields(form);
return;
}
form.submit();
});
- 只要不调用
reportValidity()或触发表单原生提交，就不会出现气泡 - 注意：有些老版本 Safari 对
novalidate支持不完整，需配合 JS 拦截 - 如果用了
setCustomValidity('')清空自定义错误，但没调用reportValidity()，也不会触发任何提示
type="number" 输入框的微调按钮和验证怎么一并隐藏
清除验证提示只是问题的一部分；type="number" 还自带上下微调按钮（spin buttons），且会拦截非数字输入（比如粘贴字母后清空字段）。要真正“去浏览器化”，得组合处理：
- 加
novalidate到表单，停用验证提示 - 用 CSS 隐藏微调按钮：
input[type="number"]::-webkit-inner-spin-button+::-webkit-outer-spin-button - 用
inputmode="numeric"替代type="number"，既唤起数字键盘，又避免校验和 spin button - 若必须保留
type="number"，需监听input事件过滤非法字符，因为keydown在粘贴时不触发
Chrome 中 placeholder 被验证样式覆盖怎么办
当输入框验证失败（例如空着提交），Chrome 会给 :invalid 状态的 input 添加红色边框，同时让 placeholder 变成浅灰色甚至不可见——这其实是伪类层叠的结果，不是 bug。
修复方式是显式重置 placeholder 样式，且提高优先级：
input:invalid::placeholder {
color: #999 !important;
opacity: 1 !important;
}
- 仅靠
novalidate不能改变:invalid的 CSS 状态，该伪类依然存在 - 务必加
!important，因为 Chrome 内部样式权重很高 - Firefox 和 Safari 的
::placeholder选择器写法不同，需额外适配
novalidate 只是跳过提交时的自动检查，但状态伪类、CSS 响应、focus 行为这些底层反馈依然活跃。真正干净的控制，始终要靠 HTML 属性 + CSS 重置 + JS 拦截三者配合。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
