js校验表单后提交表单的三种方法总结

JS校验表单后提交表单有三种方法总结，分别是：

1.提交前在JS验证，如果无误则提交。

2.在提交按钮上绑定函数，在函数中判断表单是否填写正确。

3.在表单提交时，拦截表单提交请求，验证表单数据后提交。

下面我将会对上述每个方法进行详细讲解，并提供示例：

1.提交前在JS验证，如果无误则提交

这个方法是最基本的方法，它的核心是在提交表单之前进行验证。我们可以通过JS获取表单元素的值，并对其进行判断验证，如果符合要求，则允许提交，否则，提示用户重新填写并阻止表单的提交。示例代码如下：

function checkForm() {
   var username = document.getElementById("username").value;
   var password = document.getElementById("password").value;
   var repassword = document.getElementById("repassword").value;
   if(username == "") {
      alert("用户名不能为空");
      return false;
   }
   if(password == "") {
      alert("密码不能为空");
      return false;
   }
   if(password != repassword) {
      alert("两次输入的密码不一致");
      return false;
   }
   return true;
}

在表单中添加onsubmit="return checkForm();"即可绑定事件

<form action="" method="post" onsubmit="return checkForm();">
   <label>用户名：</label>
   <input type="text" id="username" name="username"><br />
   <label>密码：</label>
   <input type="password" id="password" name="password"><br />
   <label>确认密码：</label>
   <input type="password" id="repassword" name="repassword"><br />
   <input type="submit" value="提交">
</form>

2.在提交按钮上绑定函数，在函数中判断表单是否填写正确

这个方法是在提交按钮上绑定一个验证函数，当点击提交按钮时，就会触发这个函数，然后对表单数据进行验证。如果验证失败，则阻止表单的提交，如果验证成功，则提交表单。示例代码如下：

function checkForm() {
   var username = document.getElementById("username").value;
   var password = document.getElementById("password").value;
   var repassword = document.getElementById("repassword").value;
   if(username == "") {
      alert("用户名不能为空");
      return false;
   }
   if(password == "") {
      alert("密码不能为空");
      return false;
   }
   if(password != repassword) {
      alert("两次输入的密码不一致");
      return false;
   }
   return true;
}

document.getElementById("submit").onclick = function() {
   if(checkForm() == false) {
      return false;
   }
};

在表单中添加一个id为submit的按钮，然后绑定事件即可。

<form action="" method="post">
   <label>用户名：</label>
   <input type="text" id="username" name="username"><br />
   <label>密码：</label>
   <input type="password" id="password" name="password"><br />
   <label>确认密码：</label>
   <input type="password" id="repassword" name="repassword"><br />
   <input type="submit" id="submit" value="提交">
</form>

3.在表单提交时，拦截表单提交请求，验证表单数据后提交

这个方法是通过拦截表单提交请求来实现验证的。在表单提交时，先阻止表单的默认提交，并进行表单数据的验证。如果验证失败，则不提交表单，如果验证成功，则手动提交表单。示例代码如下：

document.getElementById("form").onsubmit = function() {
   var username = document.getElementById("username").value;
   var password = document.getElementById("password").value;
   var repassword = document.getElementById("repassword").value;
   if(username == "") {
      alert("用户名不能为空");
      return false;
   }
   if(password == "") {
      alert("密码不能为空");
      return false;
   }
   if(password != repassword) {
      alert("两次输入的密码不一致");
      return false;
   }
   return true;
};

在表单中添加一个id为form的表单元素，然后绑定事件即可。

<form action="" method="post" id="form">
   <label>用户名：</label>
   <input type="text" id="username" name="username"><br />
   <label>密码：</label>
   <input type="password" id="password" name="password"><br />
   <label>确认密码：</label>
   <input type="password" id="repassword" name="repassword"><br />
   <input type="submit" value="提交">
</form>