表单到对象函数 - Javascript

在Web开发过程中，表单是最常用的交互方式之一。当我们在前端收集用户输入的数据时，需要将它们存储在JavaScript对象中以便后续处理。本文将介绍如何使用JavaScript将表单数据转换为对象。

基础示例

我们假设有以下HTML表单：

<form>
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name">

  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email">

  <label for="gender">性别：</label>
  <select id="gender" name="gender">
    <option value="male">男</option>
    <option value="female">女</option>
  </select>

  <button type="submit">提交</button>
</form>

接下来，我们需要编写一个JavaScript函数来将表单数据转换为对象：

function formToObject(form) {
  const formData = new FormData(form);
  const data = {};
  for (const [key, value] of formData.entries()) {
    data[key] = value;
  }
  return data;
}

这个函数接受一个表单元素作为参数，并使用JavaScript内置的FormData API获取表单数据。然后使用for...of循环遍历FormData对象中的所有键值对，将它们存储在一个对象中并返回。现在我们可以在表单的提交事件中使用它：

const form = document.querySelector('form');
form.addEventListener('submit', (event) => {
  event.preventDefault();
  const data = formToObject(form);
  console.log(data);
  // {name: "John Doe", email: "john@example.com", gender: "male"}
});

现在，当我们在表单中提交数据时，表单数据将被转换为一个对象并打印到控制台中。

复杂表单

如果表单中包含更多的输入组件，例如复选框和单选框，我们需要稍微修改一下formToObject函数。

复选框

当表单中有多个同名的复选框时，我们需要将它们的值存储为一个数组。这可以通过以下方式实现：

function formToObject(form) {
  const formData = new FormData(form);
  const data = {};
  for (const [key, value] of formData.entries()) {
    if (!data[key]) {
      data[key] = [];
    }
    data[key].push(value);
  }
  return data;
}

此时，我们需要将表单的HTML稍作修改：

<form>
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name">

  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email">

  <label>语言：</label>
  <input type="checkbox" id="lang1" name="language" value="javascript">
  <label for="lang1">JavaScript</label>
  <input type="checkbox" id="lang2" name="language" value="python">
  <label for="lang2">Python</label>

  <button type="submit">提交</button>
</form>

单选框

当表单中有单选框时，我们需要查找哪个单选框被选中并将它的值存储在对象中。这可以通过以下方式实现：

function formToObject(form) {
  const formData = new FormData(form);
  const data = {};
  for (const [key, value] of formData.entries()) {
    if (!data[key]) {
      data[key] = value;
    } else if (Array.isArray(data[key])) {
      data[key].push(value);
    } else {
      data[key] = [data[key], value];
    }
  }
  return data;
}

我们需要将表单的HTML稍作修改：

<form>
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name">

  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email">

  <label>语言：</label>
  <input type="radio" id="lang1" name="language" value="javascript">
  <label for="lang1">JavaScript</label>
  <input type="radio" id="lang2" name="language" value="python">
  <label for="lang2">Python</label>

  <button type="submit">提交</button>
</form>

总结

在本文中，我们学习了如何使用JavaScript将表单数据转换为对象。无论是简单的输入框还是复杂的复选框和单选框，我们都可以使用此技术轻松处理表单数据。