如何检查 form.reset() 是否改变了任何东西答案

【问题标题】：How to check if form.reset() has changed anything如何检查 form.reset() 是否改变了任何东西
【发布时间】：2020-12-08 21:04:55
【问题描述】：

js 中有没有办法检查表单的reset() 功能是否真的改变了某些东西。重置将表单输入重置为默认值。但是如果当前值已经是默认值，我想注意reset() 没有效果。如果reset() 改变了我想调用foo() 的东西，如果重置没有效果我想调用bar()。如果不比较之前和之后的每个输入字段，这是否可以优雅地实现？

【问题讨论】：

调用form.reset()之前和之后的快照？
但我必须逐个比较快照输入字段，这是我的第一个想法，但感觉并不优雅
不是很优雅，但你可以在调用 reset 时检查每个字段是否原始/脏
我认为你问这个问题是一个不好的症状。您的客户应该将表单的状态保存在某个地方，并且您还应该与该状态一起保持初始状态。两者兼得后，您可以轻松检查重置是否更改了某些内容（实际上您根本无法使用重置！）

标签： javascript html typescript

【解决方案1】：

在调用form.reset() 之前，尝试将当前值与默认值（在value 属性中）进行比较：

const hasChanged = Array.from(form.elements).some(x => {
    const attrValue = x.getAttribute('value') || '';
    return x.value !== attrValue;
});

form.reset();

if (hasChanged)
    foo();

【讨论】：

【解决方案2】：

使用FormData 的简短（但不是最佳）方式：

const form = document.forms[0];

function run() {
  const data = new FormData(form);
  form.reset();
  const resetData = new FormData(form);
  if (
   JSON.stringify([...data.entries()]) ===
   JSON.stringify([...resetData.entries()])
  ){
    console.log('foo');
  } else {
    console.log('bar');
  }
}

<form>
<input name=i1 />
<input name=i2 />
</form>
<button onclick="run()">Reset & Check</button>

【讨论】：

仅供参考，可以删除.entries()