formnovalidate 是用于跳过浏览器原生表单验证的布尔属性，仅对当前提交行为生效，与暂存无关；暂存需通过监听 input/change 事件将数据实时保存至 localstorage 等持久化存储。
formnovalidate 是什么，它不适用于“暂存”场景
formnovalidate 是 <input> 或 <button></button> 上的布尔属性，作用是**跳过浏览器原生表单验证**（比如 required、type="email" 校验），仅对当前提交行为生效。它和“暂存”没有逻辑关联——暂存本质是数据持久化（存到 localStorage / 后端等），而 formnovalidate 只影响提交时是否触发验证弹窗或阻止 submit 事件。
暂存表单数据该用什么方式
真正要做暂存，核心是监听用户输入并保存字段值，而不是依赖提交行为。常见做法：
- 用
input、change或blur事件监听每个<input>、<textarea></textarea>、<select></select>的变化，实时写入localStorage - 给表单加唯一标识（如
data-form-id="profile-edit"），避免不同表单数据互相覆盖 - 注意处理 checkbox/radio：它们的
checked属性需单独读取，不能只靠value - 敏感字段（如密码）不应暂存，可主动过滤掉
name="password"等字段
示例片段：
document.querySelectorAll('form[data-form-id]').forEach(form => {
const id = form.dataset.formId;
const load = () => {
const saved = localStorage.getItem(`form-${id}`);
if (saved) Object.entries(JSON.parse(saved)).forEach(([k, v]) => {
const el = form.querySelector(`[name="${k}"]`);
if (el && el.type === 'checkbox') el.checked = v;
else if (el) el.value = v;
});
};
const save = () => {
const data = {};
form.querySelectorAll('[name]:not([name=""])').forEach(el => {
if (el.type === 'checkbox' || el.type === 'radio') {
data[el.name] = el.checked;
} else {
data[el.name] = el.value;
}
});
localStorage.setItem(`form-${id}`, JSON.stringify(data));
};
form.addEventListener('input', save);
form.addEventListener('change', save); // 兼容 select、checkbox
load();
});
什么时候才需要 formnovalidate
只有在你**明确想绕过浏览器校验、但仍要触发 submit 事件**时才用它。典型场景：
- 点击“暂存草稿”按钮时，不希望
required字段报错，但又想走form.submit()触发后端接口（此时后端自己校验） - 表单有多个提交按钮，其中一个是“保存为草稿”，另一个是“提交审核”，后者才需要完整校验
这时写法是：
<button type="submit" formnovalidate name="action" value="draft">暂存草稿</button> <button type="submit" name="action" value="submit">提交审核</button>
注意：formnovalidate 只对当前按钮生效，且不会阻止 JavaScript 中的 submit() 调用；但它**不会自动帮你存数据**，仍需配合上面的监听逻辑。
容易踩的坑
很多人以为加了 formnovalidate 就等于“支持暂存”，结果发现页面刷新后数据丢了——这是因为：
-
formnovalidate不产生任何存储行为，它只是关掉了 HTML5 验证提示 - 直接调用
form.submit()会跳转或刷新页面，导致内存中未保存的数据丢失 -
localStorage存的是字符串，JSON 序列化时会丢掉Date、undefined、函数等类型，表单里一般只存原始值，问题不大 - 移动端软键盘收起可能触发
blur，但不一定触发input，建议同时监听两者
真正关键的不是要不要验证，而是数据有没有在 DOM 变化时被及时捕获并落盘。验证控制和数据暂存是两条独立的线，别混在一起想。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
