jQuery validate验证插件使用详解

介绍

jQuery validate是一个流行的jQuery表单验证插件，它可以通过包含少量的代码来验证表单。该插件提供了各种内置的规则可以验证输入的值，还可以创建自定义的规则。

安装

jQuery validate插件可以通过几种方式进行安装。一种常见的方法是使用CDN，可以在页面上添加以下代码即可：

<script type="text/javascript" src="https://cdn.bootcss.com/jquery-validate/1.19.0/jquery.validate.min.js"></script>

也可以从GitHub上下载插件源代码，将jquery.validate.min.js文件引入你的项目。

基本用法

要使用jQuery validate插件，需要先在HTML表单上添加一些元数据，然后使用JavaScript初始化插件。以下是一个基本的用法示例：

<form id="myForm">
  <input type="text" name="username" required>
  <input type="email" name="email" required>
  <button type="submit">提交</button>
</form>

$(document).ready(function() {
  $("#myForm").validate();
});

上面的HTML代码中，required属性告诉jQuery validate插件此输入框为必填项。

在JavaScript中，调用validate()方法来初始化插件，并默认验证表单中所有带有required属性的输入框。

规则

jQuery validate插件中内置了许多规则可以验证表单输入。以下是一些常见的规则：

• required：输入框必填。
• email：验证输入是否符合email的格式，例如：[e-mail]。
• url：验证输入是否符合URL的格式，例如：http://www.example.com。
• number：验证输入是否为数字，包括小数和负数。
• digits：验证输入是否为整数。
• maxlength：限制输入的字符数。
• minlength：至少输入的字符数。

为了添加规则，我们需要在HTML表单中添加.validate()方法的配置选项。例如，要验证手机号是否符合格式，我们需要在HTML中添加：

<form id="myForm">
  <input type="text" name="username" required>
  <input type="email" name="email" required>
  <input type="text" name="phone" required>
  <button type="submit">提交</button>
</form>

然后在JavaScript中使用配置选项：

$(document).ready(function() {
  $("#myForm").validate({
    rules: {
      phone: {
        required: true,
        number: true,
        minlength: 11,
        maxlength: 11
      }
    }
  });
});

以上代码中，我们通过指定rules对象中的phone属性来添加了自定义规则。

自定义规则

如果内置规则无法满足需求，我们可以通过添加自定义规则来扩展插件的功能。

$.validator.addMethod("captcha", function(value, element) {
  // 验证逻辑
}, "验证码错误");

addMethod()方法第一个参数是规则名称，第二个参数是验证逻辑函数。如果验证逻辑返回true，则该规则通过验证，否则返回false，并显示第三个参数中的错误消息。

例如，我们要为输入11位手机号时，验证必须以138或139开头，可以这样实现：

$.validator.addMethod("mobile", function(value, element) {
  var length = value.length;
  var mobile = /^((13[8,9])\d{8})$/;
  return this.optional(element) || (length == 11 && mobile.test(value));
}, "手机号格式不正确");

然后在HTML中添加：

<form id="myForm">
  <input type="text" name="username" required>
  <input type="email" name="email" required>
  <input type="text" name="phone" required>
  <button type="submit">提交</button>
</form>

最后在JavaScript中使用配置选项：

$(document).ready(function() {
  $("#myForm").validate({
    rules: {
      phone: {
        required: true,
        number: true,
        minlength: 11,
        maxlength: 11,
        mobile: true
      }
    }
  });
});

示例

表单验证

以下示例展示如何使用jQuery validate插件来验证表单。具体而言，该示例验证了用户名，Email地址和手机号是否符合规则。

<form id="myForm">
  <div class="form-group">
    <label for="username">用户名:</label>
    <input type="text" name="username" id="username" class="form-control" required minlength="4" maxlength="20">
  </div>
  <div class="form-group">
    <label for="email">Email地址:</label>
    <input type="email" name="email" id="email" class="form-control" required>
  </div>
  <div class="form-group">
    <label for="phone">手机号:</label>
    <input type="text" name="phone" id="phone" class="form-control" required minlength="11" maxlength="11">
  </div>
  <div class="form-group">
    <button type="submit" class="btn btn-primary">提交</button>
  </div>
</form>

$(document).ready(function() {
  $("#myForm").validate({
    rules: {
      username: {
        required: true,
        minlength: 4,
        maxlength: 20
      },
      email: {
        required: true,
        email: true
      },
      phone: {
        required: true,
        number: true,
        minlength: 11,
        maxlength: 11
      }
    }
  });
});

动态添加规则

以下示例展示如何通过按钮单击动态添加规则。

<form id="myForm">
  <div class="form-group">
    <label for="username">用户名:</label>
    <input type="text" name="username" id="username" class="form-control" required minlength="4" maxlength="20">
  </div>
  <div class="form-group">
    <label for="email">Email地址:</label>
    <input type="email" name="email" id="email" class="form-control" required>
  </div>
  <div class="form-group">
    <label for="phone">手机号:</label>
    <input type="text" name="phone" id="phone" class="form-control" required minlength="11" maxlength="11">
  </div>
  <div class="form-group">
    <button type="submit" class="btn btn-primary">提交</button>
  </div>
</form>
<button id="addRuleBtn" class="btn btn-success">添加规则</button>

$(document).ready(function() {
  $("#myForm").validate({
    rules: {
      username: {
        required: true,
        minlength: 4,
        maxlength: 20
      },
      email: {
        required: true,
        email: true
      },
      phone: {
        required: true,
        number: true,
        minlength: 11,
        maxlength: 11
      }
    }
  });

  $("#addRuleBtn").on("click", function() {
    $.validator.addMethod("usernameRule", function(value, element) {
      return value.length > 8;
  }, "用户名长度不能小于8");

    $("#username").rules("add", {
      usernameRule:true
    });
  });
});

以上代码中，我们在addRuleBtn按钮单击事件中添加了usernameRule规则，然后动态添加到username输入框上，并指定其参数值为true。

总结

以上介绍了jQuery validate插件的基本用法，规则和自定义规则。通过使用jQuery validate插件，我们可以轻松地验证表单输入，从而提高用户体验和数据的准确性。