novalidate仅跳过浏览器原生验证（如required、type="email"等），不影响JavaScript调用checkValidity()或reportValidity()，也不绕过后端校验；必须直接写在<form>标签中才生效。
novalidate 属性到底跳过哪些验证
novalidate 是 <form> 标签的布尔属性，它只跳过浏览器原生的表单验证逻辑，比如 required、type="email"、pattern、min/max 等触发的校验提示（如红色边框、弹窗提示、checkValidity() 返回 false）。它**不跳过 JavaScript 手动调用的 reportValidity() 或 checkValidity()**，也不影响后端验证。
常见误解是加了 novalidate 就能绕过所有校验——其实只是关掉了浏览器默认拦截提交的行为，表单仍可被 JS 主动校验，甚至还能手动触发验证。
怎么加 novalidate 才真正生效
必须直接写在 <form> 开始标签里，不能靠 JS 动态添加再触发（因为提交时浏览器只读取初始 HTML 属性）：
<form novalidate> <input required type="email"> <button type="submit">提交</button> </form>
- 写成
novalidate=""或novalidate="novalidate"都可以，布尔属性有即生效 - 如果同时用了
formnovalidate在某个<button type="submit">上，那个按钮会单独跳过验证，而其他提交按钮仍受验证约束 - 注意：Vue/React 等框架中若用 v-bind 或 JSX 动态绑定，要确保渲染时该属性已存在，否则首次提交可能仍触发验证
novalidate 和 JS 校验共存时的坑
加了 novalidate 后，submit 事件一定会触发（不再被浏览器阻止），但开发者容易忽略两个关键点：
立即学习“前端免费学习笔记（深入）”；
-
event.preventDefault()必须显式调用，否则表单仍会跳转或刷新页面 -
input元素上的validity对象依然可用，比如input.validity.valueMissing仍反映字段状态，只是浏览器不自动高亮或阻止提交 - 调用
form.checkValidity()仍返回false，但不会自动弹提示；想显示自定义错误，得自己读validity并操作 DOM
什么时候该用 novalidate，什么时候不该用
适合场景：完全接管校验逻辑，比如用库（如 Formik、VeeValidate）做统一提示、异步校验、字段联动等；或者做渐进增强——先让表单可提交，再用 JS 补充体验。
不该用的场景：仅为了临时调试而加 novalidate 却忘了删掉，导致上线后用户输错邮箱也能提交；或者误以为加了它就不用写任何校验代码，结果后端暴露在脏数据风险下。
真正关键的不是加不加 novalidate，而是你是否清楚控制了“谁在什么时候校验、失败后怎么反馈、错误信息是否准确对应字段”。浏览器验证只是第一道轻量防线，关掉它不等于卸下责任。
