novalidate属性仅禁用浏览器提交时的自动校验拦截和原生ui提示，不移除required等约束语义；必须加在标签上才生效，对添加无效；保留validity api、伪类、键盘类型等，但:invalid状态不再动态更新。
novalidate 属性不是让表单“不进行格式验证”，而是让浏览器跳过提交时的自动校验拦截和原生 UI 提示——required、type="email"、pattern 这些约束依然存在，只是不再阻止提交或弹气泡。
novalidate 必须加在 form 标签上才生效
它对 input、button 或其他元素加了完全无效，浏览器直接忽略。常见错误写法包括：
-
<input type="email" required novalidate>→ 无任何效果 -
<button type="submit" novalidate>提交</button>→ 属性被忽略，仍触发校验 -
<form novalidate="false"></form>→ 布尔属性不接受值，写了也当true处理
正确写法只有一种：<form novalidate></form>。React 中需写成 noValidate（驼峰），但最终渲染到 DOM 的必须是小写 novalidate，否则无效。
加了 novalidate 后哪些东西还照常工作？
很多人误以为加了它就“关掉了验证”，其实只是移除了浏览器的自动拦截层，底层逻辑全在：
-
input.validity.valid、form.checkValidity()返回值不变 -
:valid/:invalid伪类仍匹配，CSS 红边框、键盘类型（如邮箱键盘）不受影响 -
input.setCustomValidity()和input.validationMessage仍可用 -
reportValidity()方法依然能调用，且会无视novalidate弹出原生提示
也就是说，你完全可以保留 required 属性供辅助技术读取，同时用 JS 控制何时、如何报错。
为什么点了提交按钮还是弹原生提示？
最常见原因是代码里主动调用了 reportValidity() —— novalidate 只禁用“自动触发”，不阻止你或框架手动调用。调试时可快速确认：
- 全局搜索
reportValidity，临时注释掉所有调用 - 在
submit事件里加console.log(e.target.checkValidity())，看是否真绕过了校验 - 检查是否用了第三方库（如 VeeValidate），其
enableNativeValidation选项默认为true，会悄悄调用reportValidity()
若必须保留 reportValidity()，加守卫：if (!form.hasAttribute('novalidate')) form.reportValidity();
多个提交按钮时，别滥用 novalidate，优先用 formnovalidate
当表单有“暂存草稿”和“正式提交”两个按钮时，统一给 form 加 novalidate 再手动 JS 校验，不如直接用 formnovalidate 更精准：
-
<button type="submit" formnovalidate>暂存</button>→ 点它时不校验，但回车提交或另一个按钮仍走原生流程 -
formnovalidate只对type="submit"的button或input有效，加在普通input上无效 - Safari 对
formnovalidate支持不稳定（iOS 15.4–17.x），关键路径别依赖它
真正容易被忽略的是：加了 novalidate 后，:invalid 伪类状态不会动态更新——字段填完后样式可能“卡住”，得靠 JS 手动切换 class 控制视觉反馈。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
