表单 form 元素事件处理

这一节我们看一下如何处理表单 form 本身的事件。

处理表单提交事件

表单提交事件 (submit) 在用户提交表单时触发。通过监听提交事件，我们可以在提交表单之前对表单数据进行验证，或者在提交表单之后执行一些操作，例如向后端服务器发送表单数据。

以下是一个基本的表单示例：

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

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

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

在上面的示例中，我们定义了一个表单，其中包含两个输入字段和一个提交按钮。要监听表单提交事件，我们可以使用 addEventListener 方法并指定 submit 事件类型：

const form = document.querySelector("#myForm");
form.addEventListener("submit", (event) => {
  event.preventDefault(); // 阻止表单默认提交行为

  // 处理表单数据
  const formData = new FormData(form);
  console.log(formData.get("name"));
  console.log(formData.get("email"));

  // 发送表单数据到后端服务器
  fetch("/api/form-data", {
    method: "POST",
    body: formData,
  })
    .then((response) => response.json())
    .then((data) => console.log(data))
    .catch((error) => console.error(error));
});

在事件监听器中，我们首先调用 preventDefault() 方法来阻止表单的默认提交行为，然后获取表单数据并将其打印到控制台中。最后，我们使用 fetch 方法将表单数据发送到后端服务器。

处理表单重置事件

表单重置事件 (reset) 在用户重置表单时触发。通过监听重置事件，我们可以在用户重置表单之前进行一些操作，例如清除表单数据或提示用户是否确定要重置表单。

以下是一个基本的表单示例：

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

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

  <button type="submit">提交</button>
  <button type="reset">重置</button>
</form>

在上面的示例中，我们定义了一个表单，其中包含两个输入字段、一个提交按钮和一个重置按钮。要监听表单重置事件，我们可以使用 addEventListener 方法并指定 reset 事件类型：

const form = document.querySelector("#myForm");
form.addEventListener("reset", (event) => {
  if (!confirm("确定要重置表单吗？")) {
    event.preventDefault(); // 阻止表单默认重置行为
  } else {
    // 清除表单数据
    form.reset();
  }
});

在事件监听器中，我们首先使用 confirm() 方法提示用户是否确定要重置表单。如果用户点击了“确定”按钮，则表单数据将被清除。如果用户点击了“取消”按钮，则阻止表单的默认重置行为。

注意，要阻止表单的默认提交或重置行为，可以调用事件对象的 preventDefault() 方法。