找出html表单是否已更改

要确定 HTML 表单是否已更改，可以使用 JavaScript 的 addEventListener 方法来监听 submit 事件，并在事件处理函数中获取表单元素的新值，将其与原始值进行比较，从而确定表单是否已更改。如果表单元素的新值与原始值不同，则说明表单已更改，可以提交表单。

以下是一个示例代码：

const form = document.querySelector('form');

form.addEventListener('submit', (event) => {
  // 防止表单提交
  event.preventDefault();

  // 获取表单元素的新值
  const newValues = form.querySelectorAll('input, select, textarea').map((element) => {
    return element.value;
  });

  // 将新值与原始值进行比较
  const areNewValuesSameAsOriginalValues = (newValues, originalValues) => {
    for (const originalValue of originalValues) {
      if (!newValues.includes(originalValue)) {
        return false;
      }
    }
    return true;
  };

  // 判断表单是否已更改
  const changedValues = areNewValuesSameAsOriginalValues(newValues, originalValues);
  if (changedValues) {
    alert('表单已更改，请重新提交！');
  } else {
    alert('表单未更改，请提交！');
  }
});

在上面的代码中，我们首先获取了表单元素，然后通过 addEventListener 方法监听 submit 事件。在事件处理函数中，我们使用 querySelectorAll 方法获取表单中的所有输入元素（包括 input, select, 和 textarea 元素），并使用 map 方法将它们的值提取为新数组。然后，我们使用 areNewValuesSameAsOriginalValues 函数比较新值和原始值，如果所有新值都包含在原始值中，则返回 true，否则返回 false。最后，根据比较结果，我们使用 alert 方法提示用户表单是否已更改。