利用HTML代码中的formnovalidate实现表单草稿保存按钮-html教程-PHP中文网

formnovalidate 是 html 表单提交按钮的布尔属性，用于临时禁用原生验证（如 required、type="email"），使未填完表单也能提交；但它不负责数据存储与恢复，需配合 js 序列化、localstorage 或后端持久化及草稿恢复逻辑才能实现完整草稿功能。

利用html代码中的formnovalidate实现表单草稿保存按钮

formnovalidate 是什么，它能解决什么问题

formnovalidate 是 HTML <button></button> 或 <input type="submit"> 元素上的布尔属性，作用是**临时禁用整个表单的原生验证逻辑**（比如 required、type="email"、pattern 等触发的校验），让点击该按钮时跳过验证直接提交。它不是用来“保存草稿”的语义属性，但恰好能支撑草稿保存这个行为——因为用户没填完，你又不想拦住他。

为什么不能只靠 formnovalidate 实现草稿保存

很多人误以为加个 formnovalidate 就算完成草稿功能，其实它只管“不校验”，不管“存到哪”“怎么恢复”。真实草稿保存必须配合 JS 手动序列化数据并持久化（如 localStorage 或 API 提交）。否则用户刷新页面后，草稿就丢了。

formnovalidate 本身不触发任何保存逻辑，它只是让表单 submit 事件能顺利执行
若表单 action 指向后端，且没阻止默认行为，加了 formnovalidate 仍会发起完整提交——这不是草稿，是误提交
浏览器原生验证被跳过，但业务规则（比如“手机号必须 11 位”）还得自己在 JS 里检查和提示

正确搭配 formnovalidate + JS 实现草稿保存

核心思路：用带 formnovalidate 的按钮触发 JS 保存逻辑，而非真实提交。关键点在于阻止默认提交行为，并手动提取字段值。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

按钮写法：<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 的特殊处理方式