jQuery validate验证插件使用详解

快来打我* 2022-07-12 04:25 306阅读 0赞

Validate验证插件，内置丰富的验证规则，还有灵活的自定义规则接口，HTML、CSS与JS之间的低耦合能让您自由布局和丰富样式，支持input,select,textarea的验证。

**Description**

浏览器支持：IE7+ 、Chrome、Firefox、Safari、Mobile Browser

jQuery版本：1.7.0+

**Usage**  
载入jQuery、validate

DOM标签验证规则填写

<div class="form_control">
     <input class="required" value="315359131@qq.com" type="text" name="email" data-tip="请输入您的邮箱" data-valid="isNonEmpty||isEmail" data-error="email不能为空||邮箱格式不正确">
    </div>
    <div class="form_control">
     <select class="required" data-valid="isNonEmpty" data-error="省份必填">
      <option value="">请选择省份</option>
      <option value="001">001</option>
      <option value="002">002</option>
     </select>
    </div>

给需要验证的表单元素的class填入required（不建议在这个class上做其他样式）。  
建议input用独立div包裹，因为验证的message是从当前input的父元素上append生成。  
**data-tip：**在尚未验证而获取焦点时出现的提示。  
**data-valid：**验证规则，若有组合验证，以||符号分割。  
**data-error：**验证错误提示，对应data-valid，以||符号分割。  
单选/复选比较特殊，需要添加元素包裹单选/复选集合，并在包裹元素上加验证规则。

JS调用

//**注意：必须以表单元素调用validate**
     $('form').validate({
      type:{
       isChecked:function(value, errorMsg, el) {
        vari = 0;
        var$collection = $(el).find('input:checked');
        if(!$collection.length) {
         returnerrorMsg;
        }
       }
      },
      onFocus:function() {
       this.parent().addClass('active');
       returnfalse;
      },
      onBlur:function() {
       var$parent =this.parent();
       var_status = parseInt(this.attr('data-status'));
       $parent.removeClass('active');
       if(!_status) {
        $parent.addClass('error');
       }
       returnfalse;
      }
     });

![2016511143927838.png_2016411143936][]

**表单提交前的验证**

$('form').on('submit',function(event) {
     event.preventDefault();
     $(this).validate('submitValidate');//return true or false;
    });

**validate内置验证规则**

required:true 必输字段  
remote:"check.php" 使用ajax方法调用check.php验证输入值  
email:true 必须输入正确格式的电子邮件  
url:true 必须输入正确格式的网址  
date:true 必须输入正确格式的日期  
dateISO:true 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性  
number:true 必须输入合法的数字(负数，小数)  
digits:true 必须输入整数  
creditcard: 必须输入合法的信用卡号  
equalTo:"\#field" 输入值必须和\#field相同  
accept: 输入拥有合法后缀名的字符串（上传文件的后缀）  
maxlength:5 输入长度最多是5的字符串(汉字算一个字符)  
minlength:10 输入长度最小是10的字符串(汉字算一个字符)  
rangelength:\[5,10\] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)  
range:\[5,10\] 输入值必须介于 5 和 10 之间  
max:5 输入值不能大于5  
min:10 输入值不能小于10

**例子：**  
验证**用户名，密码，确认密码，主页，生日，邮箱**等  
首先引入Jquery、引入jquery.validate.js、引入messages\_cn.js并且为表单定义一个id，为需要验证的控件定义**name属性**，并赋值，此插件使用的是控件的name属性，而非id。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="jquery邮箱验证.aspx.cs" Inherits="练习.jquery邮箱验证" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
      <title></title>
      <styletype="text/css">
      #aa{ color:Red;}
      </style>
       <script src="Jquery1.7.js"type="text/javascript"></script
      <script src="jquery.validate.js"type="text/javascript"></script>
      <script src="messages_cn.js"type="text/javascript"></script>
      <script type="text/javascript">
        $(function () {
     
     
        $('#form1').validate({
          rules: {
            username: { required: true, minlength: 6, maxlength: 12 },
            password: { required: true, minlength: 6 },
            passwordok:{required: true, equalTo: "#password"},
            index: { required: true, url: true },
            birthday: { required: true, dateISO: true },
            bloodpress:{required: true,digits:true},
            email: { required: true, email: true }
        },
        errorshow: function (error, element) {
          error.appendTo(element.siblings('span'));
        }
     
     })
        })
       
      </script>
    </head>
    <body>
      <formid="form1"runat="server">
      <div>
      <table>
      <tr><td>用户名：</td><td>
      <input name="username"type="text"/><spanid="aa">*</span></td></tr>
      <tr><td>密码：</td><td>
      <input id="password"name="password"type="text"/><spanid="aa">*</span></td></tr>
      <tr><td>确认密码：</td><td>
      <input id="repassword"name="passwordok"type="text"/><spanid="aa">*</span></td></tr>
       <tr><td>主页：</td><td>
      <input name="index"type="text"/><spanid="aa">*</span></td></tr>
      <tr><td>生日：</td><td>
      <input name="birthday"type="text"/><spanid="aa">*</span></td></tr>
      <tr><td>血压：</td><td>
      <input name="bloodpress"type="text"/><spanid="aa">*</span></td></tr>
     <tr><td>邮箱：</td><td><inputname="email"type="text"/><spanid="aa">*</span></td></tr>
     <tr><td></td><td>
      <input id="Button1"type="button"value="button"/></td></tr>
    </table>
      </div>
      </form>
    </body>
    </html>

实现如下效果：

![2016511145746555.jpg_2016411145756][]

[2016511143927838.png_2016411143936]: /images/20220711/83a8cf48bbf84e0d96e58c1fbfe401ee.png
[2016511145746555.jpg_2016411145756]: /images/20220711/d6da8109a7d344a09d96736b0a292649.png