唯一真正关闭html5默认校验的方式是在标签上添加novalidate属性；其他方法仅绕过提示，校验逻辑仍在运行，且novalidate必须写在上，区分大小写，不接受值。
直接在 <form></form> 标签上加 novalidate 属性，这是唯一真正关闭 HTML5 默认校验的方式。其他方法（比如只删 required、只绑 preventDefault()）都只是绕开表层提示，校验逻辑仍在后台运行，极易干扰 JS 自己的验证流程。
为什么不能只靠 removeAttribute('required') 或删掉 pattern
浏览器一旦触发过校验（比如用户失焦、回车提交），输入框就会进入“已验证态”：即使你用 JS 删了 required，input.checkValidity() 仍返回 false，:invalid 伪类也不自动消失，红边框可能一直挂着。
-
input.setCustomValidity('')必须配合调用，才能重置校验状态 - 单纯移除属性不等于“清空校验记忆”，尤其在 IE10/11 和旧 Android 上更明显
- 移动端软键盘类型（如邮箱键盘）由
type决定，和校验无关；别误把键盘切换当成校验没关掉
novalidate 必须写在 <form></form> 上，不是 <input> 或按钮
这个属性只对 <form></form> 生效，加在 <input>、<button></button> 或用 JS 动态添加，浏览器一律忽略——既不报错，也不起作用。
- 正确写法只有：
<form novalidate></form>或<form novalidate=""></form> - 错误写法包括：
<input novalidate>、<form novalidate></form>（驼峰）、<form novalidate="false"></form>（布尔属性不接受值） - 如果表单是 Vue/React 动态渲染的，确保
novalidate在首次挂载时就存在，而不是后续 patch 加上的
禁用后 checkValidity() 还能用吗？:valid/:invalid 会消失吗？
会，但行为不变：novalidate 只关提交拦截，不关校验能力本身。
-
form.checkValidity()和input.checkValidity()仍返回正确布尔值，可放心用于手动判断 -
:valid/:invalid伪类依然匹配，CSS 里写的input:invalid { border-color: red; }还会生效——这不是 bug，是设计如此 - 若想隐藏红边框，得加 CSS 覆盖：
form[novalidate] input:invalid { border-color: #ccc; } - 第三方库（如 VeeValidate、Formik）可能悄悄调用
reportValidity()，它无视novalidate，务必全局搜索排查
真正麻烦的不是加一行 novalidate，而是很多人加了之后，还留着 required、type="email" 等属性，又用 JS 去监听 invalid 事件——这等于一边关水龙头，一边往池子里灌水。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
