novalidate 必须写在 标签上才生效，仅禁用提交时的自动校验，不影响 :valid/:invalid 伪类、移动端键盘类型及 checkvalidity()；常见错误包括拼写错误、加在非 form 元素上或赋值。
novalidate 必须写在 <form></form> 标签上才生效
加在 <input> 或 <button></button> 上完全无效，浏览器直接忽略。它只作用于整个表单的提交拦截逻辑，不是通用开关。
常见错误包括：no-validate（拼错）、noValidate（JS 驼峰写法不能用于 HTML 属性）、<form novalidate="false"></form>（布尔属性不接受值，写了也当 true 处理）。
-
<form novalidate></form>✅ 正确且推荐 -
<form novalidate=""></form>✅ 空字符串也有效，但语义不清 -
<form novalidate="true"></form>❌ 无效，浏览器仍执行原生校验 -
<input novalidate>❌ 属性不被识别，无任何效果
加了 novalidate 表单仍被拦住？检查是否调用了 reportValidity()
novalidate 只禁用“用户点击提交时的自动校验”，但不阻止你或框架代码里主动调用 reportValidity()——这个方法会无视 novalidate，强制弹出原生提示。
调试时可快速定位：在 submit 事件里加一行 console.log('reportValidity called?', /reportValidity/.test(e.target.innerHTML));，或全局搜索该函数调用。
- 临时注释掉所有
reportValidity()调用，确认是否还弹窗 - 若必须保留，加守卫：
if (!form.hasAttribute('novalidate')) form.reportValidity(); -
checkValidity()安全，它只返回布尔值，不触发 UI
novalidate 不影响 :valid/:invalid 伪类和移动端键盘类型
很多人误以为加了 novalidate 就“关掉了所有验证痕迹”，其实它只动提交拦截这一环。字段仍有 required、type="email" 等属性，所以：
- 伪类照常匹配，CSS 红框/边框依然出现
- 移动端仍会弹出邮箱键盘、数字键盘等，语义和体验不受损
-
input.validity.valid返回值不变 - 可用 CSS 覆盖：
form[novalidate] input:invalid { box-shadow: none; border-color: #ccc; }
多按钮场景下优先用 formnovalidate 而非删属性
当表单有“暂存草稿”和“正式提交”两个按钮时，统一加 novalidate 再手动 JS 校验“正式提交”按钮，不如直接用 formnovalidate 更干净。
formnovalidate 是按钮级开关，只对点击该按钮生效，不影响回车提交或其它按钮，也不干扰 checkValidity() 的计算逻辑。
-
formnovalidate只能用在<button type="submit"></button>或<input type="submit">上 - 写在
<input type="text">或<select></select>上无效 - 回车提交仍受
<form></form>的全局设置控制，formnovalidate不覆盖它
novalidate 后，:valid/:invalid 伪类在某些浏览器（尤其是移动端 Safari）中可能卡住不更新，靠 CSS 覆盖不一定可靠；更稳妥的做法是用 JS 主动添加/移除 is-error 类来控制样式状态。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
