迹忆客 专注技术分享

本教程将介绍如何使用 JavaScript 提交表单。

表单有助于从用户那里获取数据并将其存储在结构化数据库中。当我们使用各种应用程序和网站时，表单提交是关键事件。它不像调用 form.submit() 或单击提交按钮那样简单。提交表单后，将在将请求发送到服务器之前立即触发 Submit 事件。这是 JavaScript 起作用并验证输入数据的地方。我们甚至可以创建对象并添加各种属性。

因此，要提交表单，我们必须首先创建一个表单，访问该表单，获取各个字段的值，验证所有值，然后单击提交按钮/调用 for.submit()。

创建 HTML 表单

我们可以使用 <form> 元素创建 HTML 表单。

<form action="/" method="post" id="signup-form">
    <input type="text" name="Username" placeholder="Full Name">
    <input type="email" name="EmailAddress" placeholder="Email Address">
    <button type="submit">Submit</button>
</form>

上面的表格具有两个属性：action 和 method。

1. action：它指定将处理表单提交过程的 URL。
2. method*：它指定用于提交表单的 HTTP 方法。post 方法通过将数据发送到请求正文中的服务器来帮助将数据存储在数据库中。get 方法将表单数据附加到带有 ? 的 URL 上。

访问表单

我们可以使用任何一种 JavaScript 选择器（例如 getElementByTag，getElementById 等）访问表单元素。

let form = document.getElementById('signup-form');

在 JavaScript 中获取表单字段的值

我们可以使用表单元素数组或引用字段的 ID 来访问表单中的输入字段。访问该字段后，可以使用 .values 属性来获取存储在该字段中的值。一旦我们获取了表单数据，就可以在进行最终表单提交之前验证数据。

// Syntax1:
let name = form.elements[0];
let username = name.value;
// Syntax2:
let name = form.elements['name'];
let username = name.value;

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

我们将事件侦听器添加到 submit 按钮，并在进入下一页之前调用验证过程。例如：对于注册页面，用户必须同时提供电子邮件和密码。

// Function to check that the input field is not empty while submitting
function requireValue(input) {
  return !(input.value.trim() === '');
}
// Event listener to perform the validation when user clicks on submit button
form.addEventListener('submit', (event) => {
  requiredFields.forEach((input) => {
    valid = valid | requireValue(input.input);
  });
  if (!valid) {
    event.preventDefault();
  }
});

在上面的代码中，我们编写了一个小的验证检查，以查看输入字段是否为空。然后，我们在提交按钮上附加了一个事件侦听器，以首先处理数据，然后再将其传递给操作 URL。我们确保输入字段不为空，如果是的话，我们通过调用 event.preventDefault() 来阻止表单提交。这样，JavaScript 和 HTML 可以处理完整的表单提交。