前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片
  • 场景篇按分类整理的大前端场景考点
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
  • 动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
  • AI 助手随时提问,即时解析
  • AI 模拟面试模拟真实面试 + 报告
  • AI 知识地图串起全站知识点
  • AI 定制路线按你的简历现排
AI 热点
旧版
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片
  • 场景篇按分类整理的大前端场景考点
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
  • 动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
  • AI 助手随时提问,即时解析
  • AI 模拟面试模拟真实面试 + 报告
  • AI 知识地图串起全站知识点
  • AI 定制路线按你的简历现排
AI 热点
旧版
首页程序员面试题库HTML formnovalidate 提交按钮绕过校验
HTML表单与输入

保存草稿时,formnovalidate 会跳过哪些校验?

给“保存草稿”的提交按钮加 formnovalidate,该按钮触发的这一次提交可以跳过浏览器的约束校验,即使正式发布要求 required 字段填齐。它不会修改其他按钮,也不能让服务端放弃校验或授权检查。

前端进阶之旅 · 一题精讲更新于 2026.09.29
HTML#表单与输入#表单
先看核心答案读代码示例
理解线索

草稿与发布的不同门槛

  1. 表单约束字段仍声明 required 等规则
  2. 草稿提交按钮可跳过交互式校验
  3. 服务端规则根据草稿或发布分别处理

跳过约束校验不等于字段值被清空;已有的值仍按成功控件规则发送。

核心回答

先记住这个答案

formnovalidate 是提交按钮级别的布尔属性。通过带它的按钮提交表单时,浏览器不会让常规约束校验挡住这次提交,适合允许标题为空或正文未完成的草稿。换用正式发布按钮时,原先的 required、pattern 等规则仍在;服务器对两条路径都要按各自契约验证。

  • formnovalidate 只作用于该提交按钮
  • 可用于允许不完整草稿
  • 正式提交仍可保持约束校验
  • 后端必须独立验证数据

草稿为什么需要单独的校验路径

写作页面可能要求发布时标题和正文完整,但草稿应随时保存。若直接删除字段上的 required,正式发布也失去浏览器提示。把 formnovalidate 放在草稿按钮上,能按提交意图区分两条路径,还可用 formaction 把草稿送到专门地址。

草稿按钮跳过浏览器阻断HTML
<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 吗?

可以,按钮可同时指定草稿接口和跳过原生约束校验。

字段不合法时草稿会发送已有值吗?

通常会按成功控件规则发送当前值;跳过校验不等于删除字段。

从一道题,走向一组知识

把知识连起来

表单与输入

hidden 输入会提交什么,能用来存秘密吗?

隐藏字段也可携带草稿状态,但客户端值不能当作权限凭据。

表单与输入

图片提交按钮为什么会多提交 x 和 y?

图片提交按钮若是草稿入口,同样要明确可访问名称与校验策略。

参考资料

  • HTML:表单与输入参考资料

示例用于理解所注明的运行环境与边界;延伸学习可结合原文中的更多案例。

本题目录
  1. 先记住这个答案
  2. 草稿为什么需要单独的校验路径
  3. 跳过前端不等于绕过服务端
  4. 容易答错的地方
  5. 面试官还会怎么问
  6. 把知识连起来
读懂,再试着讲出来

先看核心答案,再读代码。最后展开追问,检查自己有没有遗漏边界。

试着回答追问
浏览全部面试题理解原理,也关注真实的使用场景。回到顶部 ↑