HTML表单如何判断是否修改过？

HTML表单本身不提供“是否被修改”的内置状态，必须手动维护脏标记（dirty state）：页面加载时立即遍历所有可交互字段（跳过disabled/readonly），用统一逻辑快照其初始值（如value、checked、selectedOptions等），后续比对时也严格采用相同方式读取实时状态，并妥善处理空值、属性与实际值差异、高频输入防抖及beforeunload提示等细节——尤其要注意contenteditable和第三方编辑器这类绕过标准表单API的特殊情况，否则极易导致判断失效。

怎么判断 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 它们的变更事件。这点很多人一开始根本没想到。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《HTML表单如何判断是否修改过？》文章吧，也可关注golang学习网公众号了解相关技术文章。