JavaScript 表单：事件和方法提交

在 JavaScript 中，处理表单提交是常见的任务。以下是关于表单提交的事件和方法的详细介绍：

表单提交方法

1. submit() 方法

可以直接调用表单的 submit() 方法来提交表单：

document.getElementById("myForm").submit();

这种方法不会触发 submit 事件，会直接提交表单。

2. 通过按钮提交

通常表单会有一个提交按钮，点击后会触发表单提交：

<form id="myForm">
  <input type="text" name="username">
  <button type="submit">提交</button>
</form>

表单提交事件

1. submit 事件

可以监听表单的 submit 事件，在表单提交前执行某些操作：

document.getElementById("myForm").addEventListener("submit", function(event) {
  // 阻止表单默认提交行为
  event.preventDefault();
  
  // 表单验证
  const username = this.username.value;
  if (!username) {
    alert("用户名不能为空");
    return;
  }
  
  // 验证通过后可以手动提交
  this.submit();
  
  // 或者使用 AJAX 提交
  // submitFormViaAJAX(this);
});

2. 阻止表单提交

在 submit 事件处理函数中调用 event.preventDefault() 可以阻止表单的默认提交行为。

表单数据获取

1. 通过表单元素获取

const form = document.getElementById("myForm");
const username = form.elements["username"].value;
const password = form.elements["password"].value;

2. 使用 FormData 对象

const form = document.getElementById("myForm");
const formData = new FormData(form);

// 获取特定字段
const username = formData.get("username");

// 添加额外字段
formData.append("token", "abc123");

// 遍历所有字段
for (let [name, value] of formData) {
  console.log(name, value);
}

AJAX 表单提交

使用 fetch 或 XMLHttpRequest 可以实现无刷新表单提交：

document.getElementById("myForm").addEventListener("submit", async function(event) {
  event.preventDefault();
  
  const formData = new FormData(this);
  
  try {
    const response = await fetch("/submit", {
      method: "POST",
      body: formData
    });
    
    const result = await response.json();
    console.log("提交成功:", result);
  } catch (error) {
    console.error("提交失败:", error);
  }
});

表单重置

可以使用 reset() 方法重置表单：

document.getElementById("myForm").reset();

表单验证

HTML5 提供了内置的表单验证功能，也可以通过 JavaScript 进行自定义验证：

form.addEventListener("submit", function(event) {
  if (!form.checkValidity()) {
    event.preventDefault();
    event.stopPropagation();
    // 显示验证错误
  }
  
  form.classList.add("was-validated");
});

以上是 JavaScript 中处理表单提交的主要事件和方法，可以根据实际需求选择适合的方式。