formnovalidate未生效是因为按钮不在form内或未设type="submit"；暂存需跳过required等所有原生校验，用requestSubmit()替代submit()，localStorage存取时注意序列化与DOM同步。
formnovalidate 为什么没跳过校验
点击带 formnovalidate 的按钮却仍触发浏览器默认校验（如弹出“请填写此字段”），大概率是因为按钮不在 <form></form> 内，或虽在表单内但未声明 type="submit"。HTML 规范要求：只有 type="submit" 且位于同一表单内的按钮，其 formnovalidate 属性才生效。
实操建议：
- 确认按钮是否包裹在目标
<form></form>标签内；若按钮在表单外，需用form属性显式关联，例如：<button type="submit" form="myForm" formnovalidate>暂存</button> - 确保按钮有
type="submit"—— 缺省时部分浏览器会按type="button"处理，此时formnovalidate完全被忽略 - 避免同时设置
formnovalidate和required在同一提交路径上混淆意图；暂存操作本就不该受required约束
表单暂存需要绕开哪些校验环节
暂存本质是「保存当前输入状态，不验证业务完整性」，因此要跳过的不只是 required，还包括 minlength、pattern、type="email" 等所有原生约束。但注意：formnovalidate 只影响提交时的原生校验触发，它不会阻止 JavaScript 主动调用 checkValidity() 或监听 invalid 事件。
常见错误现象：点了暂存按钮，控制台仍报错 Uncaught DOMException: Failed to execute 'submit' on 'HTMLFormElement': The form has no submit button —— 这说明你试图用 JS 调用 form.submit()，而该方法无视 formnovalidate，必须改用 requestSubmit()。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 用
requestSubmit()替代submit()：它尊重formnovalidate，且只触发一次原生校验逻辑 - 如果用 JS 拦截提交（如
event.preventDefault()后手动收集数据），就根本不用依赖formnovalidate，直接读取form.elements即可 - 后端接收暂存请求时，也应跳过服务端字段级校验（如非空、格式），只做基础清洗和存储
localStorage 暂存时 value 类型容易踩的坑
localStorage 只存字符串，直接 JSON.stringify(form) 会失败 —— HTMLFormElement 不可序列化。常见错误是写成 localStorage.setItem('draft', document.querySelector('form'))，结果存了个 [object HTMLFormElement]。
实操建议：
- 遍历
form.elements，过滤掉disabled和无name的控件，再提取value或checked状态 - 对
<input type="file">特别小心：它的value是文件路径（已废弃）或空字符串，真实文件需用FileList+FileReader单独处理，通常暂存场景应跳过上传字段 - 日期类输入（
type="date"/"datetime-local"）的值已是 ISO 字符串，无需额外转换；但<select multiple></select>需用Array.from(select.selectedOptions).map(o => o.value)提取数组
从 localStorage 恢复表单时的 DOM 同步问题
恢复数据时直接赋值 input.value = savedValue 不会触发 input 事件，导致依赖该事件的 UI 组件（如自定义验证提示、联动下拉）不同步。更隐蔽的问题是：对于 <textarea></textarea>，用 innerHTML 赋值会破坏换行符解析；对于 <input type="checkbox">，仅设 checked = true 不足以让 :checked CSS 生效（需确保 DOM 已挂载）。
实操建议：
- 对文本类控件（
input,textarea,select），优先用element.value = ...；对复选/单选框，用element.checked = Boolean(savedValue) - 手动触发事件同步：
element.dispatchEvent(new Event('input', { bubbles: true }))，比change更早捕获用户态变更 - 避免在 DOM 尚未 ready 时恢复数据 —— 放在
DOMContentLoaded后，或用setTimeout(..., 0)延迟到下一宏任务
最易被忽略的是表单重置（reset()）与暂存状态的冲突：用户点重置后，localStorage 里的草稿还在，下次进入页面又自动恢复。要么在 reset 时清空对应 key，要么加个「是否覆盖本地草稿」的轻量提示。
