判断表单是否被修改需手动维护脏状态：页面加载后立即用统一逻辑快照各字段当前值（value/checked/selectedoptions等），对比时同样逻辑读取实时值，注意空值处理与防抖，并避开disabled/readonly字段。
怎么判断 HTML 表单有没有被用户改过
直接看 form.checkValidity() 或监听 input 事件？不行，这些只管“是否合法”，不管“是否修改”。真正可靠的方式是记录初始值，在需要时比对。核心就一条：表单本身没有内置的“dirty state”，得自己维护。
用 form.elements 遍历初始值并快照
页面加载后立刻保存所有可交互字段的原始值（value、checked、selectedOptions 等），别等用户点按钮才开始记——那时可能已经改过了。
-
textarea和input[type="text"]看value -
input[type="checkbox"]和input[type="radio"]看checked -
select[multiple]要遍历selectedOptions并取value数组 - 跳过
disabled或readonly字段，它们不算用户可修改项
对比时注意 DOM 属性和实际输入值的区别
别直接用 el.getAttribute('value') ——它返回的是 HTML 属性初始值，不是用户输入后的当前值；也别只比 el.value，因为 checkbox/radio 的状态不在 value 里。
- 始终用
el.value（文本类）、el.checked（布尔类）、Array.from(el.selectedOptions).map(o => o.value)（多选下拉）来读当前态 - 初始快照也要用同一套逻辑读，否则对比失效
- 注意空字符串
''和null/undefined的差异，建议统一转成字符串再比
防抖提交 + 提示用户丢弃修改要小心
用户离开页面前弹确认框，看似简单，但容易误判：比如自动填充、日期控件触发多次 input、富文本编辑器内容变化未同步到隐藏域……
立即学习“前端免费学习笔记（深入）”；
- 不要在每个
input事件里立刻设isDirty = true，加个setTimeout防抖 100ms，避免高频输入误触发 - 监听
beforeunload时，只 return 字符串就能触发浏览器原生提示，但现代 Chrome/Firefox 只在真正有修改时才显示，所以必须确保你的 dirty 判断是实时准确的 - 如果用了框架（如 React/Vue），别混用受控/非受控组件逻辑，否则快照值和真实 DOM 值会脱节
最麻烦的其实是 contenteditable 区域和第三方编辑器，它们不走标准表单 API，得单独 hook 它们的变更事件。这点很多人一开始根本没想到。
