formnovalidate 是 HTML 表单提交按钮的布尔属性，用于临时禁用原生验证（如 required、type="email"），使未填完表单也能提交；但它不负责数据存储与恢复，需配合 JS 序列化、localStorage 或后端持久化及草稿恢复逻辑才能实现完整草稿功能。
formnovalidate 是什么，它能解决什么问题
formnovalidate 是 HTML <button> 或 <input type="submit"> 元素上的布尔属性，作用是**临时禁用整个表单的原生验证逻辑**（比如 required、type="email"、pattern 等触发的校验），让点击该按钮时跳过验证直接提交。它不是用来“保存草稿”的语义属性，但恰好能支撑草稿保存这个行为——因为用户没填完，你又不想拦住他。
为什么不能只靠 formnovalidate 实现草稿保存
很多人误以为加个 formnovalidate 就算完成草稿功能，其实它只管“不校验”，不管“存到哪”“怎么恢复”。真实草稿保存必须配合 JS 手动序列化数据并持久化（如 localStorage 或 API 提交）。否则用户刷新页面后，草稿就丢了。
-
formnovalidate本身不触发任何保存逻辑，它只是让表单 submit 事件能顺利执行 - 若表单 action 指向后端，且没阻止默认行为，加了
formnovalidate仍会发起完整提交——这不是草稿，是误提交 - 浏览器原生验证被跳过，但业务规则（比如“手机号必须 11 位”）还得自己在 JS 里检查和提示
正确搭配 formnovalidate + JS 实现草稿保存
核心思路：用带 formnovalidate 的按钮触发 JS 保存逻辑，而非真实提交。关键点在于阻止默认提交行为，并手动提取字段值。
- 按钮写法：
<button type="submit" formnovalidate>暂存草稿</button> - 监听表单的
submit事件，对含formnovalidate的按钮点击做区分处理 - 用
new FormData(formEl)或遍历formEl.elements获取当前值，避免遗漏 disabled/hidden 字段 - 存到
localStorage时建议加时间戳和表单标识（如formId），避免多表单冲突 - 示例片段：
formEl.addEventListener('submit', e => { const btn = e.submitter; if (btn?.hasAttribute('formnovalidate')) { e.preventDefault(); const data = Object.fromEntries(new FormData(formEl)); localStorage.setItem('draft-contact-form', JSON.stringify({ ...data, savedAt: Date.now() })); } });
容易踩的坑：disabled 字段、重复保存、跨设备同步
这几个点不处理，草稿功能就算上线也很快被用户吐槽。
立即学习“前端免费学习笔记（深入）”；
-
FormData默认忽略disabled字段——如果草稿里需要保留 disabled 的初始值（比如预填的不可编辑 ID），得手动补上：formEl.querySelector('[name="id"]').value - 频繁点击“暂存草稿”会造成 localStorage 频繁写入，建议加防抖（500ms 内重复点击只存一次）
-
localStorage是 per-origin 且不跨设备，用户换手机或清缓存就丢草稿；真要可靠，得走后端接口 + 用户身份绑定 - 别忘了恢复草稿：页面加载时读取并
formEl.reset()后再用Object.assign或逐个赋值，注意select[multiple]和checkbox的特殊处理方式
草稿保存看着简单，实际要覆盖字段状态、存储可靠性、恢复一致性三个层面。光靠 formnovalidate 连第一层都算不上。
