formnovalidate 属性仅禁用 type="submit" 的 button 或 input 元素触发的表单原生验证流程，不影响字段自身的 required/pattern 约束及 :valid/:invalid 样式状态。
formnovalidate 属性到底禁用谁的验证？
formnovalidate 不是禁用 input 自身的 required 或 pattern，而是告诉浏览器：这个提交按钮（仅限 type="submit"）不要触发整个表单的原生验证流程。它只对 button 和 input[type="submit"] 有效，加在普通 input 上完全没作用。
- 必须配合
type="submit"使用，比如：<button type="submit" formnovalidate>跳过验证提交</button> - 它不会移除
input的required属性，也不会阻止oninput或onchange里的手动校验逻辑 - 如果表单里有多个 submit 按钮，其中一个带
formnovalidate，其他不带的仍会走完整验证
为什么点了 formnovalidate 按钮，input 还在标红？
标红（如 :valid/:invalid 伪类生效）是浏览器根据字段当前值+约束属性（required、min、pattern 等）实时计算的，和是否点击了 formnovalidate 无关。按钮只是跳过了提交时的拦截，但不重置字段的校验状态。
- 表单字段仍会保持
:invalid样式，除非你手动清空或修正输入 - 若想同步清除视觉反馈，得配合 JS：比如点击后调用
inputElement.setCustomValidity('')或重置表单form.reset() - 注意：直接
input.value = ''不会自动清除:invalid状态，必须触发一次校验重计算（例如input.reportValidity()或聚焦再失焦）
替代方案：什么时候该用 formnovalidate，什么时候该用 JS 控制？
formnovalidate 适合“同一表单内存在多种提交路径”的场景，比如“暂存草稿”和“正式提交”两个按钮。但若需求是彻底绕过某字段校验（比如隐藏字段、动态开关），硬编码 formnovalidate 反而容易失控。
- 动态控制验证：优先用
input.required = false或input.removeAttribute('required')，比依赖按钮属性更明确 - 需兼容旧浏览器（IE）：
formnovalidate在 IE 中被忽略，此时必须用 JS 阻止submit事件并手动调用event.preventDefault() - 性能影响极小，但它会让表单行为分散在 HTML 和 JS 两处，维护时容易遗漏某处的验证逻辑
常见错误：把 formnovalidate 加在 input 上
这是最常踩的坑——给 <input type="text" formnovalidate> 加这个属性，完全无效。浏览器会忽略它，且控制台不会报错，导致你以为“关掉了验证”，实际提交时依然被拦住。
-
formnovalidate是HTMLButtonElement和HTMLInputElement（仅当type="submit"时）的专有属性 - 类似地，
formaction、formmethod也只对 submit 类型按钮生效 - 检查方法：打开开发者工具 → 查看该元素的 DOM 属性 → 确认它是不是 submit 按钮节点
真正要清理输入框默认行为，比如禁用自动填充、拼写检查、输入建议，该用的是 autocomplete="off"、spellcheck="false"、autocapitalize="none" 这些属性，而不是 formnovalidate。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
