怎么利用HTML的formnovalidate属性为特定按钮跳过表单校验

本篇文章向大家介绍《怎么利用HTML的formnovalidate属性为特定按钮跳过表单校验》，主要包括，具有一定的参考价值，需要的朋友可以参考一下。

formnovalidate 属性必须加在 或 <input type="submit"> 上且位于

内；它仅对提交按钮生效，用于单按钮跳过校验，与表单级 novalidate 互斥但优先级更高。

formnovalidate 属性该加在哪个按钮上

必须加在 或 <input type="submit"> 元素上，且该按钮需位于 内部。它只对提交按钮生效，对 type="button" 或普通链接无效。

常见错误是加在表单外的按钮、或加在非 submit 类型的按钮上，此时属性完全被忽略。

• ✅ 正确：

取消

和 form 的 novalidate 属性有什么区别

novalidate 是 的布尔属性，作用于整个表单——所有提交按钮都会跳过校验；而 formnovalidate 是按钮级控制，只影响当前按钮，其余 submit 按钮仍按规则校验。

典型场景：一个表单有「保存」和「放弃」两个提交按钮，「保存」需校验必填项，「放弃」应无条件提交（如清空草稿）。这时不能给整个 加 novalidate，否则「保存」也绕过了校验。

• 用 novalidate → 全表单禁用校验（全局开关）
• 用 formnovalidate → 单按钮临时豁免（精准控制）
• 二者可共存，但 formnovalidate 优先级更高

浏览器兼容性与实际表现差异

Chrome、Firefox、Edge（Chromium 内核）、Safari 15.4+ 均支持 formnovalidate，但 Safari 早期版本（≤15.3）存在 bug：点击带 formnovalidate 的按钮时，仍会触发 checkValidity() 和红色提示框。

如果需兼容旧 Safari，建议额外加 JS 阻断默认行为：

<button type="submit" formnovalidate onclick="event.preventDefault(); this.form.submit();">放弃</button>

• 原生 formnovalidate 在现代浏览器中足够可靠
• 不推荐用 JS 全面接管校验逻辑来“模拟”该功能，会破坏语义和可访问性
• 注意：formnovalidate 不影响 required 属性本身的存在，只是跳过其校验逻辑

配合后端处理时容易忽略的关键点

前端跳过校验 ≠ 后端可以省略校验。用户仍可能通过 DevTools 删除 formnovalidate、或直接 POST 请求绕过前端限制。

所以「放弃」类按钮提交的数据，后端仍需明确识别意图（例如靠按钮的 name 或 value），并执行对应逻辑（如清空 session 而非存入数据库）。

• 推荐写法：放弃
• 后端检查 action === "discard"，则跳过业务字段校验，直接执行退出/清空流程
• 不要依赖前端是否触发了校验，来决定后端是否做数据清洗

真正容易被忽略的是：这个属性只解决“提交时不弹红框”，不代表数据安全或业务逻辑自动适配——它只是个轻量级交互开关，不是信任边界。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《怎么利用HTML的formnovalidate属性为特定按钮跳过表单校验》文章吧，也可关注golang学习网公众号了解相关技术文章。