Question

js中是否有一种方法可以检查表单的reset()功能是否确实发生了更改。重置将表单输入重置为默认值。但是，如果当前值已经是默认值，我想注意reset()无效。如果reset()更改了我想调用的内容foo()，万一重置没有效果，我想调用bar()。无需比较之前和之后的每个输入字段，这是否可以实现？

Answer 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();

Answer 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>

如何检查form.reset（）是否已更改任何内容

2 个答案: