最彻底禁用浏览器默认校验的方式是在form标签上添加novalidate属性，它会全局跳过required、type、pattern等所有原生验证逻辑，包括提交拦截和伪类更新。
怎么让 input 完全不触发浏览器默认校验
直接加 novalidate 到 form 标签上，这是最彻底的禁用方式。它会让整个表单跳过所有内置验证逻辑，包括 required、type="email"、pattern 等触发的提示和提交拦截。
常见错误是只给某个 input 加 formnovalidate —— 这个属性只在提交按钮上生效，且仅对**当前点击的按钮**临时绕过校验，不影响其他按钮或回车提交。
-
novalidate必须写在form元素上，不是input或button - 如果用了 JavaScript 动态提交（比如
form.submit()），novalidate依然有效 - 加了
novalidate后，:valid/:invalid伪类也不会再更新，样式可能“卡住”
想保留部分校验，只关掉特定字段的检查
浏览器没有“关闭单个 input 校验”的原生开关，但可以靠移除触发条件来实现等效效果：
- 删掉
required、minlength、pattern等验证属性 - 把
type改成text（例如原本是type="email"，改成type="text"就不会校验邮箱格式） - 避免使用会隐式触发校验的值，比如
input[type="number"]输入字母时会变invalid，此时设value=""并清空validity状态也不可靠，不如换类型
注意：setCustomValidity('') 只能清空自定义错误，对原生约束无效；checkValidity() 调用后仍会返回 false，如果字段本身带 required。
立即学习“前端免费学习笔记（深入）”；
novalidate 和 JavaScript 校验能共存吗
完全可以，而且推荐这么做。禁用原生校验后，你完全掌控校验时机、提示方式和交互逻辑。
- 去掉
novalidate再用 JS 拦submit事件，容易和原生弹窗竞争，用户可能看到两个提示 - 保留
novalidate，用addEventListener('submit', ...)+event.preventDefault()，自己调checkValidity()或手动判断，更稳定 - 某些旧版 Safari 对混合使用较敏感，建议统一走 JS 流程，别一半原生一半 JS
示例：
<form novalidate>
<input name="email" type="text">
<button type="submit">提交</button>
</form>
<script>
document.querySelector('form').addEventListener('submit', e => {
const email = e.target.email.value;
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
alert('邮箱格式不对');
e.preventDefault();
}
});
</script>
移动端键盘类型和校验有关系吗
有，但不是校验逻辑本身，而是输入体验和兼容性陷阱。比如 input[type="email"] 在 iOS 上会唤出带 @ 键的键盘，但一旦用户粘贴了非法内容（如空格），提交时原生校验就报错——而你又没关 novalidate，就会弹系统提示，无法定制。
-
type="tel"唤出数字键盘，但不校验格式；type="number"唤出数字键盘且强制校验，容易误判（如输入 “12.3.4”） - 想保键盘体验又不要校验？用
inputmode="email"或inputmode="numeric"替代type，它们只影响软键盘，不触发任何校验 -
inputmode在 Android Chrome 和 iOS 16.4+ 支持良好，老版本 fallback 到type="text"即可
真正麻烦的是：有些安卓输入法会根据 type 自动修正内容（比如把 “abc” 强转成 “Abc”），这种行为无法通过 novalidate 关闭，只能换 inputmode 或监听 input 事件手动清理。
禁用校验看着简单，实际要分清是关“提示”、关“拦截”还是关“状态同步”。最易被忽略的是 novalidate 对 CSS 伪类和 ValidityState 对象的影响——页面样式或 JS 里还依赖 :invalid 切换红框，或者用 input.validity.valid 做判断，关了校验却忘了清理这些逻辑，bug 就藏得特别深。
