首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

找出html表单是否已更改

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

以下是一个示例代码:

代码语言:javascript
复制
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 方法提示用户表单是否已更改。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的合辑

领券