Jquery表单验证失败后不提交的解决方法

2023年6月10日下午8:43 • JavaScript

下面是详细讲解JQuery表单验证失败后不提交的解决方法的完整攻略：

1. JQuery表单验证插件

在解决JQuery表单验证失败后不提交的问题之前，我们需要了解一下JQuery表单验证插件，常见的表单验证插件有如下几种：

(1) JQuery Validate

JQuery Validate是最常用的表单验证插件之一，它可以验证表单的必填、邮件格式、数字格式等常见的表单验证需求，而且可以轻松地自定义验证规则。

(2) FormValidator

FormValidator是另一个常用的表单验证插件，它的优点在于支持国际化，可以根据不同的语言环境提供不同的提示信息。

(3) Parsley

Parsley是一款轻量级的表单验证插件，支持异步验证和自定义验证规则。

以上三款表单验证插件都有详细的文档和示例，可以根据需要选取适合自己项目的插件。

2. 解决JQuery表单验证失败后不提交的问题

在使用JQuery表单验证插件时，一些情况下我们可能需要在表单验证失败后不提交表单，而只是提示用户错误信息。解决这个问题有以下几种方法：

(1) 利用JQuery Validate插件的 submitHandler 回调函数

JQuery Validate插件提供了一个 submitHandler 回调函数，该函数在表单验证成功后触发。我们可以在这个回调函数中阻止表单的提交，代码如下：

$(document).ready(function(){
  $('#myform').validate({
    submitHandler: function(form) {
      // 阻止表单提交
      return false;
    }
  });
});

(2) 利用表单的 onsubmit 事件

表单有一个 onsubmit 事件，在此事件中，您可以执行表单验证并防止提交。如果表单验证通过，可以使用JavaScript submit() 方法提交表单。代码如下：

<form id="myform" onsubmit="return false">
  <input type="text" name="username" required>
  <input type="password" name="password" required>
  <input type="submit" value="提交">
</form>

<script>
$(document).ready(function(){
  $('#myform').submit(function(){
    if($(this).valid()){
      this.submit();
    }else{
      //表单验证失败，不提交表单
      return false;
    }
  });
});
</script>

在这个示例中，我们在表单的 onsubmit 事件中执行表单验证，如果表单验证通过，调用表单的 submit() 方法提交表单，否则不提交表单。

3. 示例说明

下面通过两个示例来说明JQuery表单验证失败后不提交的解决方法：

示例1：利用JQuery Validate插件的 submitHandler 回调函数

HTML 代码如下：

<form id="myform">
  <input type="text" name="username" required>
  <input type="password" name="password" required>
  <input type="submit" value="提交">
</form>

JS 代码如下：

$(document).ready(function(){
  $('#myform').validate({
    rules:{
      username:{
        minlength:6,
        maxlength:20
      },
      password:{
        minlength:6,
        maxlength:20
      }
    },
    messages:{
      username:{
        minlength:'用户名长度不能小于6位',
        maxlength:'用户名长度不能大于20位'
      },
      password:{
        minlength:'密码长度不能小于6位',
        maxlength:'密码长度不能大于20位'
      }
    },
    submitHandler: function(form) {
      alert("表单验证成功，准备提交表单！");
      // 阻止表单提交
      return false;
    }
  });
});

在这个示例中，我们针对用户名和密码分别设置了最小长度和最大长度的验证规则。在表单的submitHandler回调函数中，我们弹出了提示框并阻止了表单的提交。

示例2：利用表单的 onsubmit 事件