先记住这个答案
formnovalidate 是提交按钮级别的布尔属性。通过带它的按钮提交表单时,浏览器不会让常规约束校验挡住这次提交,适合允许标题为空或正文未完成的草稿。换用正式发布按钮时,原先的 required、pattern 等规则仍在;服务器对两条路径都要按各自契约验证。
formnovalidate只作用于该提交按钮- 可用于允许不完整草稿
- 正式提交仍可保持约束校验
- 后端必须独立验证数据
草稿为什么需要单独的校验路径
写作页面可能要求发布时标题和正文完整,但草稿应随时保存。若直接删除字段上的 required,正式发布也失去浏览器提示。把 formnovalidate 放在草稿按钮上,能按提交意图区分两条路径,还可用 formaction 把草稿送到专门地址。
<form action="/posts/publish" method="post">
<label for="title">标题</label>
<input id="title" name="title" required>
<button type="submit" formaction="/posts/drafts" formnovalidate>存草稿</button>
<button type="submit">发布</button>
</form>点击“存草稿”仍会提交当前已有字段,只是不先被原生约束校验拦住。点击“发布”则按字段约束校验。服务端草稿接口需允许部分数据,发布接口则必须重新检查完整性。
跳过前端不等于绕过服务端
浏览器校验只是用户体验层,用户可直接发送 HTTP 请求。即使正式按钮没有 formnovalidate,发布接口也不能信任前端一定执行了校验。草稿也可能包含危险的 HTML、超长文本或不属于当前用户的资源 ID,服务端仍须检查这些条件。
如果完全用 JavaScript 接管提交,应主动区分草稿和发布的校验策略;按钮属性只影响浏览器原生提交流程,不会自动改变你自己写的业务校验函数。
草稿按钮跳过的是浏览器的交互式约束校验,不能理解成“字段值不传了”。用户已填写的标题、正文仍按普通表单规则进入请求,禁用字段仍然不会传。服务端应该按操作类型实施不同校验:保存草稿允许正文为空,发布才要求标题和内容完整。不能让前端的 formnovalidate 决定权限或数据安全,因为客户端可自行构造请求,服务器必须独立判断。
容易答错的地方
- 认为
formnovalidate会删除required - 字段约束仍存在,只是本次由该按钮发起的提交不受交互式约束校验阻挡。
- 认为草稿接口可以完全不校验
- 草稿可不完整,但权限、大小、内容安全和数据类型仍需服务端验证。
面试官还会怎么问?
它与表单上的 novalidate 有什么区别?
novalidate 影响整个表单的原生提交;formnovalidate 针对特定提交按钮。
草稿按钮还能用 formaction 吗?
可以,按钮可同时指定草稿接口和跳过原生约束校验。
字段不合法时草稿会发送已有值吗?
通常会按成功控件规则发送当前值;跳过校验不等于删除字段。
参考资料
示例用于理解所注明的运行环境与边界;延伸学习可结合原文中的更多案例。