如何判断JavaScript中form.reset()是否实际修改了表单内容？

当然有办法！不用逐个遍历字段的核心思路是利用FormData记录重置前后的表单状态，再对比两者是否一致，这样就能优雅判断reset()是否产生了实际修改。

具体实现步骤 #

1. 先捕获表单重置前的完整状态
2. 执行reset()方法
3. 捕获重置后的表单状态
4. 对比两个状态：如果不一致，说明reset()产生了修改，调用foo()；反之调用bar()

完整代码示例 #

<form id="myForm">
  <input type="text" name="username" value="默认用户名">
  <input type="checkbox" name="remember" defaultChecked>
  <button type="reset">重置</button>
</form>

<script>
// 辅助函数：对比两个FormData是否完全一致
function isFormDataEqual(formDataA, formDataB) {
  const entriesA = Array.from(formDataA.entries());
  const entriesB = Array.from(formDataB.entries());
  
  // 先判断条目数量是否一致
  if (entriesA.length !== entriesB.length) return false;
  
  // 逐个对比键值对
  return entriesA.every(([key, value], index) => {
    const [bKey, bValue] = entriesB[index];
    return key === bKey && value === bValue;
  });
}

// 获取表单元素
const form = document.getElementById('myForm');

// 绑定重置逻辑（这里以点击重置按钮为例，你也可以直接在代码里触发reset）
form.querySelector('button[type="reset"]').addEventListener('click', (e) => {
  e.preventDefault(); // 先阻止默认重置行为，我们自己控制
  
  // 1. 记录重置前的状态
  const preResetState = new FormData(form);
  
  // 2. 执行重置
  form.reset();
  
  // 3. 记录重置后的状态
  const postResetState = new FormData(form);
  
  // 4. 对比并执行对应函数
  if (!isFormDataEqual(preResetState, postResetState)) {
    foo();
  } else {
    bar();
  }
});

// 示例函数
function foo() {
  console.log('reset()产生了实际修改！');
}

function bar() {
  console.log('当前已是默认值，reset()未生效！');
}
</script>

为什么这个方案优雅？ #

• 无需逐个字段处理：FormData会自动捕获所有表单控件的状态（包括文本输入、复选框、单选框、下拉选择等），不用手动遍历每个input元素
• 兼容性好：FormData是ES6的API，所有现代浏览器都支持，甚至IE10+也能正常使用
• 状态对比准确：会正确处理各种控件的默认值（比如复选框的defaultChecked、输入框的defaultValue等），reset后的状态和默认值完全匹配

注意事项 #

• 对于文件输入控件：reset()会清空已选择的文件，所以如果重置前有文件，对比时会被识别为状态变化，这符合预期
• 如果表单里有动态添加的控件：FormData也会自动包含它们，无需额外处理

内容的提问来源于stack exchange，提问作者scholl123