从零开始学jQuery Validate 之01

╰半夏微凉° 2022-07-24 07:25 241阅读 0赞

## jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。  该插件是由 Jörn Zaefferer 编写和维护的，他是 jQuery 团队的一名成员，是 jQuery UI 团队的主要开发人员，是 QUnit 的维护人员。该插件在 2006 年 jQuery 早期的时候就已经开始出现，并一直更新至今      ##

## jQuery Validate默认校验规则： ##

<table style="border:0px; margin:4px 0px; padding:0px; border-collapse:collapse; width:729px; color:rgb(51,51,51); font-family:'Open Sans','Helvetica Neue',Helvetica,Arial,STHeiti,'Microsoft Yahei',sans-serif; font-size:12px"> 
 <tbody style="border:0px; margin:0px; padding:0px"> 
  <tr style="border:0px; margin:0px; padding:0px; background-color:rgb(246,244,240)"> 
   <th style="border:1px solid rgb(85,85,85); margin:0px; padding:3px; color:rgb(255,255,255); vertical-align:top; background-color:rgb(85,85,85)"> 序号</th> 
   <th style="border:1px solid rgb(85,85,85); margin:0px; padding:3px; color:rgb(255,255,255); vertical-align:top; background-color:rgb(85,85,85)"> 规则</th> 
   <th style="border:1px solid rgb(85,85,85); margin:0px; padding:3px; color:rgb(255,255,255); vertical-align:top; background-color:rgb(85,85,85)"> 描述</th> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px"> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:1em; vertical-align:top"> 1</td> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:1em; vertical-align:top"> required:true</td> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:1em; vertical-align:top"> 必须输入的字段。</td> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px; background-color:rgb(246,244,240)"> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:1em; vertical-align:top"> 2</td> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:1em; vertical-align:top"> remote:"check.php"</td> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:1em; vertical-align:top"> 使用 ajax 方法调用 check.php 验证输入值。</td> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px"> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:1em; vertical-align:top"> 3</td> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:1em; vertical-align:top"> email:true</td> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:1em; vertical-align:top"> 必须输入正确格式的电子邮件。</td> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px; background-color:rgb(246,244,240)"> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:1em; vertical-align:top"> 4</td> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:1em; vertical-align:top"> url:true</td> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:1em; vertical-align:top"> 必须输入正确格式的网址。</td> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px"> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:1em; vertical-align:top"> 5</td> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:1em; vertical-align:top"> date:true</td> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:1em; vertical-align:top"> 必须输入正确格式的日期。日期校验 ie6 出错，慎用。</td> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px; background-color:rgb(246,244,240)"> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:1em; vertical-align:top"> 6</td> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:1em; vertical-align:top"> dateISO:true</td> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:1em; vertical-align:top"> 必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性。</td> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px"> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:1em; vertical-align:top"> 7</td> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:1em; vertical-align:top"> number:true</td> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:1em; vertical-align:top"> 必须输入合法的数字（负数，小数）。</td> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px; background-color:rgb(246,244,240)"> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:1em; vertical-align:top"> 8</td> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:1em; vertical-align:top"> digits:true</td> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:1em; vertical-align:top"> 必须输入整数。</td> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px"> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:1em; vertical-align:top"> 9</td> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:1em; vertical-align:top"> creditcard:</td> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:1em; vertical-align:top"> 必须输入合法的信用卡号。</td> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px; background-color:rgb(246,244,240)"> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:1em; vertical-align:top"> 10</td> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:1em; vertical-align:top"> equalTo:"#field"</td> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:1em; vertical-align:top"> 输入值必须和 #field 相同。</td> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px"> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:1em; vertical-align:top"> 11</td> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:1em; vertical-align:top"> accept:</td> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:1em; vertical-align:top"> 输入拥有合法后缀名的字符串（上传文件的后缀）。</td> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px; background-color:rgb(246,244,240)"> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:1em; vertical-align:top"> 12</td> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:1em; vertical-align:top"> maxlength:5</td> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:1em; vertical-align:top"> 输入长度最多是 5 的字符串（汉字算一个字符）。</td> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px"> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:1em; vertical-align:top"> 13</td> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:1em; vertical-align:top"> minlength:10</td> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:1em; vertical-align:top"> 输入长度最小是 10 的字符串（汉字算一个字符）。</td> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px; background-color:rgb(246,244,240)"> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:1em; vertical-align:top"> 14</td> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:1em; vertical-align:top"> rangelength:[5,10]</td> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:1em; vertical-align:top"> 输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）。</td> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px"> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:1em; vertical-align:top"> 15</td> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:1em; vertical-align:top"> range:[5,10]</td> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:1em; vertical-align:top"> 输入值必须介于 5 和 10 之间。</td> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px; background-color:rgb(246,244,240)"> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:1em; vertical-align:top"> 16</td> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:1em; vertical-align:top"> max:5</td> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:1em; vertical-align:top"> 输入值不能大于 5。</td> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px"> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:1em; vertical-align:top"> 17</td> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:1em; vertical-align:top"> min:10</td> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:1em; vertical-align:top"> 输入值不能小于 10。</td> 
  </tr> 
 </tbody> 
</table>

##  ##

## jQuery Validate默认提示： ##

messages: {
        
    	required: "This field is required.",
    	remote: "Please fix this field.",
    	email: "Please enter a valid email address.",
    	url: "Please enter a valid URL.",
    	date: "Please enter a valid date.",
    	dateISO: "Please enter a valid date ( ISO ).",
    	number: "Please enter a valid number.",
    	digits: "Please enter only digits.",
    	creditcard: "Please enter a valid credit card number.",
    	equalTo: "Please enter the same value again.",
    	maxlength: $.validator.format( "Please enter no more than {0} characters." ),
    	minlength: $.validator.format( "Please enter at least {0} characters." ),
    	rangelength: $.validator.format( "Please enter a value between {0} and {1} characters long." ),
    	range: $.validator.format( "Please enter a value between {0} and {1}." ),
    	max: $.validator.format( "Please enter a value less than or equal to {0}." ),
    	min: $.validator.format( "Please enter a value greater than or equal to {0}." )
    }

**jQuery Validate提供了中文信息提示包：**

**jquery.validate.js的使用**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
        <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
        <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
        <title>jQuery Validate</title>
    </head>
    <script>
        $().ready(function() {
          var validator =   $("#signupForm").validate({
              //将错误信息放在 label 元素后并使用 span 元素包裹它
    //          errorPlacement: function(error, element) {
    //              $( element )
    //                      .closest( "form" )
    //                      .find( "label[for='" + element.attr( "id" ) + "']" )
    //                      .append( error );
    //          },
    //          errorElement: "span",
                //添加验证规则
                rules: {
                    username: {
                        required: true,
                        minlength: 2
                    },
                    password: {
                        required: true,
                        minlength: 5
                    },
                    confirm_password: {
                        required: true,
                        minlength: 5,
                        equalTo: "#password"
                    },
                    email: {
                        required: true,
                        email: true
                    },
                    address:{
                        required:true
                    }
                },
                //验证规则消息提示
                messages: {
                    username: {
                        required: "（请输入用户名）",
                        minlength: "（用户名必需由两个字母组成）"
                    },
                    password: {
                        required: "（请输入密码）",
                        minlength: "（密码长度不能小于 5 个字母）"
                    },
                    confirm_password: {
                        required: "（请输入密码）",
                        minlength: "（密码长度不能小于 5 个字母）",
                        equalTo: "（两次密码输入不一致）"
                    },
                    email: "（请输入一个正确的邮箱）",
                    address:{
                        required: "（请输入家庭住址）"
                    }
                }
            });
    
           //重置表单
            $("#reset").click(function() {
                validator.resetForm();
            });
        });
    
    </script>
    //设置错误信息提示的样式
    <style>
        input.error { border: 1px solid red; }
        label.error {
            /*background:url("./demo/images/unchecked.gif") no-repeat 0px 0px;*/
    
            padding-left: 16px;
    
            padding-bottom: 2px;
    
            font-weight: bold;
    
            color: #EA5200;
        }
        label.checked {
            /*background:url("./demo/images/checked.gif") no-repeat 0px 0px;*/
        }
    </style>
    <body>
    <form class="cmxform" id="signupForm"  method="get" action="" style="align-content: center">
        <fieldset>
            <legend>表单验证</legend>
            <p>
                <label for="username">用户名</label>
                <input id="username" name="username" type="text">
            </p>
            <p>
                <label for="password">密码</label>
                <input id="password" name="password" type="password">
            </p>
            <p>
                <label for="confirm_password">验证密码</label>
                <input id="confirm_password" name="confirm_password" type="password">
            </p>
            <p>
                <label for="email">Email</label>
                <input id="email" name="email" type="email">
            </p>
            <p>
                <label for="address">家庭地址</label>
                <input id="address" name="address" type="text">
            </p>
            </fieldset>
            <p>
                <input class="submit" type="submit" value="提交">
                <input  type="reset" id="rest"  value="重置">
            </p>
    
        </fieldset>
    </form>
    </body>
    </html>