formnovalidate 是 button 的布尔属性，用于跳过浏览器原生表单验证；它本身不保存数据，但为草稿保存提供“不校验即提交”的前提，需配合 javascript 拦截 submit、提取数据并存入 localstorage 或后端。

formnovalidate 是什么，它和草稿保存有什么关系

formnovalidate 是 <button></button> 标签的一个布尔属性，作用是**跳过浏览器原生表单验证**（比如 required、type="email" 等触发的校验），仅对当前按钮生效。它本身不保存数据，但为“不校验 + 提交”提供了前提——你可以在用户还没填完时，把当前字段值存为草稿。

怎么用 formnovalidate 实现草稿提交逻辑

关键不是靠 formnovalidate 自己保存，而是配合 JavaScript 拦截提交、提取数据、存到本地或发到后端：

• 给保存按钮加上 formnovalidate 和 type="submit"，确保点击时不触发校验弹窗
• 监听表单的 submit 事件，用 event.preventDefault() 阻止默认提交行为
• 用 new FormData(formElement) 或遍历 form.elements 获取所有字段值（包括空值）
• 把数据序列化（如 JSON.stringify()）后存入 localStorage，或 POST 到草稿接口

示例按钮写法：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

<button type="submit" formnovalidate name="action" value="draft">保存草稿</button>

后端可通过 action 字段区分是正式提交还是草稿保存。

为什么不能只靠 formnovalidate，还要手动取值

浏览器跳过验证后，submit 事件仍会触发，但如果你没阻止默认行为，表单仍会按 action 和 method 发起完整请求——这会导致页面跳转或刷新，草稿就丢了。另外，FormData 能正确读取 disabled 字段（而 form.elements 不包含它们），但注意：被设为 disabled 的控件不会出现在 FormData 中，如果草稿需要保留 disabled 状态的值，得手动从 DOM 取 value 或 dataset。

容易踩的坑：表单控件状态与草稿一致性

草稿保存后，用户下次打开页面要能还原状态（比如选中的 radio、勾选的 checkbox、textarea 内容、甚至自定义组件的展开状态）。仅存 input 值远远不够：

• checked、selected、value 这些 DOM 属性必须显式恢复，不能只设 value
• 动态添加的字段（如 JS 插入的 <input>）若没加 name，FormData 会漏掉
• 使用了框架（如 React/Vue）时，直接操作 DOM 存取可能和虚拟 DOM 冲突，应优先走框架的 state + useEffect / mounted 同步逻辑

真正难的不是加 formnovalidate，而是让草稿“像没关过页面一样”还原整个交互上下文。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！