JavaScript - 表单处理

我们可以使用 JavaScript 以多种方式处理表单，例如验证、提交、修改、更新表单数据等。

表单验证

表单验证通常发生在服务器端，即客户端输入所有必要数据并点击提交按钮之后。

如果客户端输入的数据不正确或缺失，服务器必须将所有数据返回给客户端，并请求客户端重新提交包含正确信息的表单。这是一个非常漫长的过程，会给服务器带来很大的负担。

JavaScript 提供了一种在将表单数据发送到 Web 服务器之前，在客户端计算机上验证表单数据的方法。表单验证通常执行两项功能。

• 基本验证 首先，必须检查表单，确保所有必填字段均已填写。只需循环遍历表单中的每个字段并检查数据即可。
• 数据格式验证 其次，必须检查输入的数据的格式和值是否正确。您的代码必须包含适当的检查，以确保输入的数据是您期望的数据。

代码片段

function validateForm() {
   var x = document.forms["myForm"]["fname"].value;
   if (x == "") {
      alert("Name must be filled out");
      return false;
   }
}
validateForm();

在上面的代码中，我们声明了一个函数 validateForm，用于检查表单输入是否有效以及是否正确填写。如果不正确，它会提醒我们填写缺失的数据。

以下是上述代码的输出:

Name must be filled out

表单提交

验证表单后，我们可以将表单数据提交到服务器。我们可以使用 submit() 和 reset() 等方法来提交和重置表单数据。

代码片段

<form id="myForm" action="">
   First name: <input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br><br>
   <input type="button" value="Submit" onclick="myFunction()">
</form>
<script>
document.getElementById("myForm").submit();
document.getElementById("myForm").reset();
</script>

在上面的代码中，我们使用了 submit() 方法提交表单数据，并使用了 reset() 方法重置表单数据。

结论

我们可以轻松地用 JavaScript 处理表单。使用 JavaScript 进行验证变得更加轻松快捷。我们还可以使用 JavaScript 提交和重置表单数据。