element 表单判断是否修改

要判断一个表单是否被修改，可以使用 HTML5 中的 FormData 对象。当页面加载时，可以使用 JavaScript 创建一个 FormData 对象来保存表单中原始的数据。然后，在表单提交或者重置之前，再次创建 FormData 对象，将表单中的数据与原始数据进行比较，如果两者不一致，则说明表单已经被修改。

以下是一个示例代码：

<form id="myForm">
  <input type="text" name="username" value="John Doe">
  <input type="email" name="email" value="john@example.com">
  <input type="submit" value="Submit">
  <input type="reset" value="Reset">
</form>

<script>
  // 创建一个原始数据对象
  const originalFormData = new FormData(document.getElementById('myForm'));

  // 监听表单提交事件
  document.getElementById('myForm').addEventListener('submit', function (event) {
    event.preventDefault();
    const currentFormData = new FormData(this);

    // 比较表单数据是否被修改
    if (isFormDataChanged(originalFormData, currentFormData)) {
      console.log('表单已经被修改');
    } else {
      console.log('表单未被修改');
    }

    // 提交表单
    this.submit();
  });

  // 监听表单重置事件
  document.getElementById('myForm').addEventListener('reset', function () {
    // 重置原始数据
    originalFormData.clear();
    for (const [key, value] of currentFormData.entries()) {
      originalFormData.append(key, value);
    }
  });

  // 判断表单数据是否被修改的函数
  function isFormDataChanged(originalData, currentData) {
    for (const [key, value] of currentData.entries()) {
      if (value !== originalData.get(key)) {
        return true;
      }
    }
    return false;
  }
</script>

注意，这只是一个简单的示例代码，实际应用中需要考虑更多的情况，比如表单中包含文件上传等特殊情况。