基于BootStrap与jQuery.validate实现表单提交校验功能

下面我将为您详细讲解如何基于BootStrap和jQuery.validate实现表单提交校验功能。

1. 引入必要的库和样式文件

在页面中引入BootStrap和jQuery库和样式文件，以及jQuery.validate插件，例如：

<!-- 引入BootStrap样式文件 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

<!-- 引入jQuery库文件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- 引入jQuery.validate插件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/additional-methods.min.js"></script>

2. 编写表单HTML代码

接着我们需要编写表单的HTML代码，例如：

<form id="myForm" method="post">
  <div class="form-group">
    <label for="username">用户名</label>
    <input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名">
  </div>
  <div class="form-group">
    <label for="password">密码</label>
    <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码">
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

3. 编写JavaScript代码

然后我们需要编写JavaScript代码来实现表单的提交校验功能，首先需要进行校验规则的设置，例如：

$(function() {
  // 设置表单校验规则
  $("#myForm").validate({
    rules: {
      username: {
        required: true, // 必填
        minlength: 3 // 最少3个字符
      },
      password: {
        required: true, // 必填
        minlength: 6 // 最少6个字符
      }
    },
    messages: {
      username: {
        required: "用户名不能为空",
        minlength: "用户名不能少于3个字符"
      },
      password: {
        required: "密码不能为空",
        minlength: "密码不能少于6个字符"
      }
    }
  });
});

上述代码中，我们通过设置rules属性来为表单的每个字段设置对应的校验规则，例如required表示必填，minlength表示最少字符数。同时，我们还可以设置messages属性来设置每个字段校验失败时的提示信息。

接着，我们需要设置表单的提交事件，并在提交前进行表单校验，例如：

$(function() {
  // 设置表单校验规则
  $("#myForm").validate({
    rules: {
      // 省略代码...
    },
    messages: {
      // 省略代码...
    },
    submitHandler: function(form) { // 表单提交事件
      // 提交前进行表单校验
      if ($("#myForm").valid()) {
        // 表单校验通过，执行表单提交
        form.submit();
      }
    }
  });
});

上述代码中，我们通过设置submitHandler属性来为表单提交事件，然后在该事件中进行表单校验。如果表单校验通过，则执行表单的提交；否则不执行表单的提交。

示例说明1

下面我们通过一个简单的示例来演示如何校验手机号码的正确性。在HTML代码中添加一个手机号码输入框：

<form id="myForm" method="post">
  <div class="form-group">
    <label for="phone">手机号码</label>
    <input type="text" class="form-control" id="phone" name="phone" placeholder="请输入手机号码">
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

然后在JavaScript代码中添加phone字段的校验规则：

$(function() {
  // 设置表单校验规则
  $("#myForm").validate({
    rules: {
      phone: {
        required: true, // 必填
        minlength: 11, // 最少11个字符
        maxlength: 11, // 最多11个字符
        digits: true, // 必须是数字
        remote: { // 远程校验手机号码是否已存在
          url: "check_phone.php", // 后端验证接口
          type: "post", // 请求方式
          dataType: "json", // 返回数据类型
          data: { // 请求参数
            phone: function() {
              return $("#phone").val();
            }
          },
          dataFilter: function(response) { // 处理返回数据
            if (response.code == 0) { // 手机号码不存在
              return true;
            } else { // 手机号码已存在
              return false;
            }
          }
        }
      }
    },
    messages: {
      phone: {
        required: "手机号码不能为空",
        minlength: "手机号码必须为11位数字",
        maxlength: "手机号码必须为11位数字",
        digits: "手机号码必须为数字",
        remote: "该手机号码已被注册"
      }
    }
  });
});

上述代码中，我们通过设置remote校验规则来实现远程校验手机号码是否已存在，其中url属性为后端验证接口，type属性为请求方式，dataType属性为返回数据类型，data属性为请求参数，dataFilter属性为处理返回数据的回调函数。

示例说明2

下面我们通过一个复杂的示例来演示如何校验多个字段的关联性。在HTML代码中添加多个字段：

<form id="myForm" method="post">
  <div class="form-group">
    <label for="password">密码</label>
    <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码">
  </div>
  <div class="form-group">
    <label for="password2">确认密码</label>
    <input type="password" class="form-control" id="password2" name="password2" placeholder="请再次输入密码">
  </div>
  <div class="form-group">
    <label for="email">邮箱</label>
    <input type="text" class="form-control" id="email" name="email" placeholder="请输入邮箱">
  </div>
  <div class="form-group">
    <label for="email2">确认邮箱</label>
    <input type="text" class="form-control" id="email2" name="email2" placeholder="请再次输入邮箱">
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

然后在JavaScript代码中添加校验规则：

$(function() {
  // 设置表单校验规则
  $("#myForm").validate({
    rules: {
      password: {
        required: true, // 必填
        minlength: 6 // 最少6个字符
      },
      password2: {
        required: true, // 必填
        equalTo: "#password" // 必须与“密码”一致
      },
      email: {
        required: true, // 必填
        email: true // 必须是有效的邮箱格式
      },
      email2: {
        required: true, // 必填
        equalTo: "#email" // 必须与“邮箱”一致
      }
    },
    messages: {
      password: {
        required: "密码不能为空",
        minlength: "密码不能少于6个字符"
      },
      password2: {
        required: "确认密码不能为空",
        equalTo: "两次输入的密码不一致"
      },
      email: {
        required: "邮箱不能为空",
        email: "请输入有效的邮箱格式"
      },
      email2: {
        required: "确认邮箱不能为空",
        equalTo: "两次输入的邮箱不一致"
      }
    }
  });
});

上述代码中，我们通过设置equalTo校验规则来实现两个字段必须一致的校验，例如equalTo: "#password"表示“确认密码”必须与“密码”一致。