jQuery验证插件 Validate详解

简介

jQuery Validate是一个轻量级的jQuery表单验证插件，可以为表单提供快速、简便和强大的验证。Validate插件具有强大的验证规则和灵活的可定制性，可以有效地为表单提供完整的验证和美观的提示信息。

环境准备

为了使用jQuery Validate插件，我们需要先准备好相关环境：

1. 引入jQuery库
2. 引入jQuery Validate插件

<script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/jquery-validate/1.17.0/jquery.validate.min.js"></script>

基本使用

jQuery Validate插件的基本使用很简单，只需要在需要进行验证的表单中，设置一些验证规则即可。

验证规则

jQuery Validate插件提供了很多现成的验证规则，下面是一些常用的验证规则：

• required: 必填项
• email: 邮箱
• url: 网址
• date: 日期(ISO格式)
• number: 数字
• digits: 非负整数
• creditcard: 信用卡号
• equalTo: 再次输入相同的值

示例1

下面的例子演示了如何在表单中进行简单的验证：

<form id="form1">
  <input type="text" name="username" placeholder="请输入用户名">
  <br>
  <input type="password" name="password" placeholder="请输入密码">
  <br>
  <input type="password" name="confirm_password" placeholder="请再次输入密码">
  <br>
  <input type="submit" value="提交">
</form>

$(document).ready(function(){
  $("#form1").validate({
    rules:{
      username:{
        required:true,
        minlength:3
      },
      password:{
        required:true,
        minlength:6
      },
      confirm_password:{
        required:true,
        equalTo: "#password"
      }
    },
    messages:{
      username:{
        required:"请填写用户名",
        minlength:"用户名至少为3个字符"
      },
      password:{
        required:"请填写密码",
        minlength:"密码至少为6个字符"
      },
      confirm_password:{
        required:"请再次输入密码",
        equalTo: "两次输入密码不一致"
      }
    }
  });
});

在上面的例子中，表单中有三个输入框：用户名、密码和确认密码。我们为这三个输入框分别设置了验证规则：必填项和长度验证。

示例2

下面的例子演示了如何自定义验证规则：

$(document).ready(function(){
  $.validator.addMethod("phone_number", function(value, element) {
    var phonePattern = /^\d{11}$/;
    return this.optional(element) || phonePattern.test(value);
  }, "请输入11位数字的手机号码");

  $("#form2").validate({
    rules:{
      phone:{
        required:true,
        phone_number:true
      }
    },
    messages:{
      phone:{
        required:"请输入手机号",
        phone_number:"请输入11位数字的手机号码"
      }
    }
  });
});

在上面的例子中，我们自定义了一个名为phone_number的验证方法，用于验证手机号码。在手机号码输入框的验证规则中使用了该方法。

总结

本文介绍了jQuery Validate插件的基本使用和自定义验证规则的方法。你可以根据自己的需要，选用不同的验证规则和自定义验证方法，来实现一个完整的表单验证功能。