JavaScript如何快速获取form表单数据

JavaScript可以通过以下方式快速获取form表单数据：

1. 使用form表单的submit事件，获取所有表单元素的值，然后将其封装为一个对象。

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

form.addEventListener('submit', event => {
  event.preventDefault(); // 禁止表单提交
  const formData = new FormData(form);
  const data = Object.fromEntries(formData.entries()); // 将FormData转换为对象
  console.log(data);
});

2. 使用form表单的elements属性遍历所有表单元素，获取其name和value属性。

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

form.addEventListener('submit', event => {
  event.preventDefault(); // 禁止表单提交
  const data = {};
  for (const elem of form.elements) {
    if (elem.tagName === 'BUTTON' || elem.type === 'reset') continue; // 排除不需要提交的元素
    data[elem.name] = elem.value;
  }
  console.log(data);
});

以上两种方式都可以快速获取form表单数据。