novalidate 与 required 不冲突，而是层级不同：novalidate 是表单级开关，禁用提交拦截但不关闭实时有效性追踪，required 字段仍触发 :invalid 伪类；formnovalidate 仅作用于单个按钮，优先级高于 novalidate。
novalidate 和 required 不是冲突，而是层级关系错位
很多人以为加了 novalidate 还要删掉 required 才算“解决冲突”，其实根本不存在冲突——novalidate 是表单级开关，required 是字段级语义，它们各司其职。浏览器不会报错或覆盖，只是行为表现让人误以为“冲突”：比如输入为空点了提交，没弹提示（novalidate 生效），但输入框边框还是红的（:invalid 伪类照常匹配 required 字段）。
为什么 required 字段加了 novalidate 还显示红色边框
因为 novalidate 只禁用提交时的拦截逻辑，不关闭浏览器对字段有效性的实时追踪。只要字段有 required 且值为空，input.validity.valueMissing 就是 true，:invalid 伪类就匹配，CSS 样式自然生效。
- 这不是 bug，是设计使然：语义（required）和交互（提交拦截）被有意解耦
-
form[novalidate] input:invalid { border-color: #ccc; }可覆盖样式，但注意 Safari 对等控件抑制不彻底 - 若想彻底隐藏验证痕迹，删掉
required更干净；若需保留无障碍支持（如屏幕阅读器读“必填”），就用 CSS 覆盖 + JS 主动控制状态类
submit 事件里调用 checkValidity() 会绕过 novalidate 吗
不会。checkValidity() 本身就不受 novalidate 影响——它只返回布尔值，不触发 UI。但如果你在 submit 事件里写了 form.checkValidity() && form.reportValidity()，那 reportValidity() 就会无视 novalidate 强行弹窗。
- 常见错误：封装校验函数时默认调用了
reportValidity()，结果点了带novalidate的表单仍弹红框 - 安全写法：
if (!form.checkValidity()) { /* 手动收集错误、高亮、提示 */ return false; } - 调试技巧：在 submit 处加
console.log(form.noValidate)，确认属性确实存在且为true
多按钮场景下该用 novalidate 还是 formnovalidate
取决于你要豁免的是“整个表单”还是“某个按钮”。novalidate 加在 <form></form> 上，所有提交方式（回车、任意 type="submit" 按钮）都跳过校验；formnovalidate 加在某个 <button type="submit"></button> 上，只对该按钮生效，其他按钮和回车仍走原生校验。
- 典型用例：
<button type="submit" formnovalidate>暂存</button>+<button type="submit">提交</button> - 注意：
formnovalidate在 iOS Safari 15.4–17.x 中有静默失效风险，关键路径别依赖它 - 如果表单里混用
novalidate和formnovalidate，后者优先级更高，但行为更难预测，建议统一策略
真正容易被忽略的点是：加了 novalidate 后，你得立刻接管校验责任。它不帮你删 required，不帮你写 JS 提示，也不阻止 reportValidity() 被意外调用——所有这些，都得你自己一条条对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
