在 JavaScript 中提交表单

使用 JavaScript 提交 HTML 表单，通常是处理其 submit 事件、检查用户输入，然后让浏览器将有效数据发送到表单的 action 指定的位置。下面的示例会创建表单、读取字段，并使用客户端验证阻止不完整的提交。服务器在使用提交的数据之前，仍必须自行验证。

创建 HTML 表单

为每个控件指定 name，它会成为提交表单数据中的键。为字段添加标签，让每个字段都有可访问的名称。action 指定接收表单数据的 URL，method 则选择浏览器发送数据的方式。POST 请求会将表单数据放在请求正文中；如何处理或存储这些数据由服务器决定。

<form action="/signup" method="post" id="signup-form">
  <label for="username">Name</label>
  <input id="username" name="username" type="text" required>

  <label for="email">Email</label>
  <input id="email" name="email" type="email" required>

  <button type="submit">Sign up</button>
  <p id="form-message" role="status"></p>
</form>

这段标记是用于浏览器页面的静态示例。表单有效且用户点击提交按钮时，浏览器会将带有 name 的控件提交到 /signup。示例中的提交按钮文字仍为英文。

访问表单

可以使用 document.getElementById() 或 document.querySelector()，通过 ID 选中表单。下面的浏览器代码假设上面的标记已经位于页面中；后续的提交处理程序也使用同一个 form 引用。

const form = document.getElementById("signup-form");

结果是表单元素。如果脚本在表单解析之前运行，请将脚本放在表单之后，或等到文档准备就绪后再运行。

在 JavaScript 中获取表单字段的值

表单的 elements 集合可让你通过控件的 name 获取控件。每个控件当前输入的文本可通过单数属性 .value 读取。对于上面的表单，可以这样读取姓名和电子邮件地址：

const username = form.elements.username.value.trim();

const email = form.elements.email.value.trim();

HTML 中的 name 属性必须与通过 form.elements 使用的键一致。去除文本首尾空格后，再检查字段值。

在 JavaScript 中验证表单字段的数据

下面的辅助函数会检查两个字段字符串是否都包含文本。它会返回一个布尔值，页面处理程序可以将该值与从表单读取的字段值配合使用。示例对象提供姓名和电子邮件地址，代码会针对这些值输出结果：

function isSignupComplete(username, email) {
  return username.length > 0 && email.length > 0;
}

const sample = { username: "Ada", email: "ada@example.com" };
console.log(isSignupComplete(sample.username, sample.email));

true

浏览器会先检查 required 和 type="email"，然后才分派表单的 submit 事件。姓名为空或电子邮件格式错误时，浏览器会在此阶段拒绝提交：监听器不会运行，也不会调用 preventDefault()，浏览器会显示自己的验证提示。只有空格的姓名可以通过 required 检查，因此监听器会收到它；去除空格后，值会变成空字符串，自定义检查会调用 preventDefault() 阻止提交，并由页面显示自己的提示。

对于页面处理程序，可以为选中的表单添加监听器，并用实时字段值执行相同的检查：

form.addEventListener("submit", (event) => { const username = form.elements.username.value.trim(); const email = form.elements.email.value.trim(); const message = document.getElementById("form-message"); if (!isSignupComplete(username, email)) { event.preventDefault(); message.textContent = "Enter your name and email."; return; } message.textContent = "Submitting…"; });

检查通过时，处理程序会保留浏览器正常的表单提交流程。检查未通过时，event.preventDefault() 会阻止浏览器发送本次提交，页面上的提示会说明需要更正什么。这种客户端验证用于向用户提供反馈，并不是安全边界：即使不经过此页面或其 JavaScript，也可以发送请求，因此端点仍需要服务器端验证。

如果其他代码需要触发表单提交，优先使用 form.requestSubmit()：它会遵循正常的验证和提交事件流程。调用 form.submit() 则会直接提交，不执行约束验证，也不分派 submit 事件，因此这类监听器不会运行。