jQuery validate插件

绝地灬酷狼 2022-05-05 09:46 305阅读 0赞

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

**默认的提示**

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).",  
        dateDE: "Bitte geben Sie ein g眉ltiges Datum ein.",  
        number: "Please enter a valid number.",  
        numberDE: "Bitte geben Sie eine Nummer ein.",  
        digits: "Please enter only digits",  
        creditcard: "Please enter a valid credit card number.",  
        equalTo: "Please enter the same value again.",  
        accept: "Please enter a value with a valid extension.",  
        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}.")  
    },

**如需要修改，可在js代码中加入：  
Js代码**

jQuery.extend(jQuery.validator.messages, {  
      required: "必选字段",  
      remote: "请修正该字段",  
      email: "请输入正确格式的电子邮件",  
      url: "请输入合法的网址",  
      date: "请输入合法的日期",  
      dateISO: "请输入合法的日期 (ISO).",  
      number: "请输入合法的数字",  
      digits: "只能输入整数",  
      creditcard: "请输入合法的信用卡号",  
      equalTo: "请再次输入相同的值",  
      accept: "请输入拥有合法后缀名的字符串",  
      maxlength: jQuery.validator.format("请输入一个长度最多是 {0} 的字符串"),  
      minlength: jQuery.validator.format("请输入一个长度最少是 {0} 的字符串"),  
      rangelength: jQuery.validator.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),  
      range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),  
      max: jQuery.validator.format("请输入一个最大为 {0} 的值"),  
      min: jQuery.validator.format("请输入一个最小为 {0} 的值")  
    });

**debug，如果这个参数为true，那么表单不会提交，只进行检查，调试时十分方便  
Js代码**

$().ready(function() {  
     $("#signupForm").validate({  
            debug:true  
        });  
    });

**如果一个页面中有多个表单，用  
Js代码**

$.validator.setDefaults({  
       debug: true  
    })

**errorPlacement：Callback Default: 把错误信息放在验证的元素后面  
指明错误放置的位置，默认情况是：error.appendTo(element.parent());即把错误信息放在验证的元素后面**

errorPlacement: function(error, element) {   
        error.appendTo(element.parent());   
    }

**例如：**

<tr>  
        <td class="label"><label id="lfirstname" for="firstname">First Name</label></td>  
        <td class="field"><input id="firstname" name="firstname" type="text" value="" maxlength="100" /></td>  
        <td class="status"></td>  
    </tr>  
    <tr>  
        <td style="padding-right: 5px;">  
            <input id="dateformat_eu" name="dateformat" type="radio" value="0" />  
            <label id="ldateformat_eu" for="dateformat_eu">14/02/07</label>  
        </td>  
        <td style="padding-left: 5px;">  
            <input id="dateformat_am" name="dateformat" type="radio" value="1"  />  
            <label id="ldateformat_am" for="dateformat_am">02/14/07</label>  
        </td>  
        <td></td>  
    </tr>  
    <tr>  
        <td class="label"> </td>  
        <td class="field" colspan="2">  
            <div id="termswrap">  
                <input id="terms" type="checkbox" name="terms" />  
                <label id="lterms" for="terms">I have read and accept the Terms of Use.</label>  
            </div>  
        </td>  
    </tr>

**JS代码：**

errorPlacement: function(error, element) {  
        if ( element.is(":radio") )  
            error.appendTo( element.parent().next().next() );  
        else if ( element.is(":checkbox") )  
            error.appendTo ( element.next() );  
        else  
            error.appendTo( element.parent().next() );  
    }

代码的作用是：一般情况下把错误信息显示在中，如果是radio显示在中，  
如果是checkbox显示在内容的后面  
**注：**

*  errorClass：String Default: “error”       **指定错误提示的css类名，可以自定义错误提示的样式**
 *  errorElement：String Default: “label”        **用什么标签标记错误，默认的是label**  
    \-errorContainer：Selector      **显示或者隐藏验证信息，可以自动实现有错误信息出现时把容器属性变为显示，无错误时隐藏，用处不大**
 *  errorContainer: “\#messageBox1, \#messageBox2”
 *  errorLabelContainer：Selector     **把错误信息统一放在一个容器里面。**
 *  wrapper：String    **用什么标签再把上边的errorELement包起来  
    一般这三个属性同时使用，实现在一个容器内显示所有错误提示的功能，并且没有信息时自动隐藏**

errorContainer: "div.error",  
    errorLabelContainer: $("#signupForm div.error"),  
    wrapper: "li"

**设置错误提示的样式，可以增加图标显示**

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;  
        }  
        success：String,Callback

**要验证的元素通过验证后的动作，如果跟一个字符串，会当做一个css类，也可跟一个函数**

success: function(label) {  
            // set   as text for IE  
            label.html(" ").addClass("checked");  
            //label.addClass("valid").text("Ok!")  
        }

**添加"valid" 到验证元素, 在CSS中定义的样式  
success: "valid"**

*  submit： Boolean Default: true    **提交时验证. 设置为false就用其他方法去验证**
 *  onfocusout：Boolean Default: true    **失去焦点时验证(不包括checkboxes/radio buttons)**
 *  onkeyup：Boolean Default: true    **在keyup时验证**
 *  onclick：Boolean Default: true    **在checkboxes 和 radio 点击时验证**
 *  focusInvalid：Boolean Default: true    **提交表单后，未通过验证的表单(第一个或提交之前获得焦点的未通过验证的表单)会获得焦点**
 *  focusCleanup：Boolean Default: false    **如果是true那么当未通过验证的元素获得焦点时，移除错误提示。避免和 focusInvalid 一起用**

**重置表单**

$().ready(function() {  
         var validator = $("#signupForm").validate({  
                submitHandler:function(form){  
                    alert("submitted");     
                    form.submit();  
                }      
            });  
            $("#reset").click(function() {  
                validator.resetForm();  
            });  
        });

**使用ajax方式进行验证，默认会提交当前验证的值到远程地址，如果需要提交其他的值，可以使用data选项**

remote: "check-email.php"  
        remote: {  
            url: "check-email.php",     //后台处理程序  
            type: "post",               //数据发送方式  
            dataType: "json",           //接受数据格式     
            data: {                     //要传递的数据  
                username: function() {  
                    return $("#username").val();  
                }  
            }  
        }

**远程地址只能输出 “true” 或 “false”，不能有其它输出**  
**addMethod：name, method, message  
自定义验证方法**

// 中文字两个字节  
        jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {  
            var length = value.length;  
            for(var i = 0; i < value.length; i++){  
                if(value.charCodeAt(i) > 127){  
                    length++;  
                }  
            }  
          return this.optional(element) || ( length >= param[0] && length <= param[1] );     
        }, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)"));  
          
        // 邮政编码验证     
        jQuery.validator.addMethod("isZipCode", function(value, element) {     
            var tel = /^[0-9]{6}$/;  
            return this.optional(element) || (tel.test(value));  
        }, "请正确填写您的邮政编码");

jQuery.validator.addMethod("telphoneValid", function(value, element) { 
        var tel = /^(130|131|132|133|134|135|136|137|138|139|150|153|157|158|159|180|187|188|189)\d{8}$/; 
        return tel.test(value) || this.optional(element); 
    }, "请输入正确的手机号码");

//自定义方法，完成手机号码的验证 
    //name:自定义方法的名称，method：函数体, message:错误消息 
    $.validator.addMethod("phone", function(value, element, param){
                //方法中又有三个参数:value:被验证的值， element:当前验证的dom对象，param:参数(多个即是数组)
                //alert(value + "," + $(element).val() + "," + param[0] + "," + param[1]); 
     return new RegExp(/^1[3458]\d{9}$/).test(value); }, "手机号码不正确");

**radio和checkbox、select的验证  
radio的required表示必须选中一个**

<input  type="radio" id="gender_male" value="m" name="gender" class="{required:true}" />  
        <input  type="radio" id="gender_female" value="f" name="gender"/>  
              //checkbox的required表示必须选中  
        <input type="checkbox" class="checkbox" id="agree" name="agree" class="{required:true}" />  
              //checkbox的minlength表示必须选中的最小个数,maxlength表示最大的选中个数,rangelength:[2,3]表示选中个数区间  
        <input type="checkbox" class="checkbox" id="spam_email" value="email" name="spam[]" class="{required:true, minlength:2}" />  
        <input type="checkbox" class="checkbox" id="spam_phone" value="phone" name="spam[]" />  
        <input type="checkbox" class="checkbox" id="spam_mail" value="mail" name="spam[]" />  
          
              //select的required表示选中的value不能为空  
        <select id="jungle" name="jungle" title="Please select something!" class="{required:true}">  
            <option value=""></option>  
            <option value="1">Buga</option>  
            <option value="2">Baga</option>  
            <option value="3">Oi</option>  
        </select>  
              // select的minlength表示选中的最小个数（可多选的select）,maxlength表示最大的选中个数,rangelength:[2,3]表示选中个数区间  
        <select id="fruit" name="fruit" title="Please select at least two fruits" class="{required:true, minlength:2}" multiple="multiple">  
            <option value="b">Banana</option>  
            <option value="a">Apple</option>  
            <option value="p">Peach</option>  
            <option value="t">Turtle</option>  
        </select>

**jQuery.Validate是监控form，在任何提交表单的操作前jQuery.Validate都会检测表单里的输入项是否满足规则，满足才允许提交。所以需要在jQuery(document).ready（）时为form进行验证注册==> $().ready()**

<body>    
        <form id="form1" runat="server">    
            <div>        
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">        
                </asp:ContentPlaceHolder>    
            </div>    
        </form>    
        <script type="text/javascript">        
            jQuery(document).ready(function() {            
                jQuery("#form1").validate();        
            });    
        </script>
     </body>

## jQuery.validate 中文 API ##

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>返回类型</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>validate(options)</td> 
   <td>Validator</td> 
   <td>验证所选的 FORM。</td> 
  </tr> 
  <tr> 
   <td>valid()</td> 
   <td>Boolean</td> 
   <td>检查是否验证通过。</td> 
  </tr> 
  <tr> 
   <td>rules()</td> 
   <td>Options</td> 
   <td>返回元素的验证规则。</td> 
  </tr> 
  <tr> 
   <td>rules("add",rules)</td> 
   <td>Options</td> 
   <td>增加验证规则。</td> 
  </tr> 
  <tr> 
   <td>rules("remove",rules)</td> 
   <td>Options</td> 
   <td>删除验证规则。</td> 
  </tr> 
  <tr> 
   <td>removeAttrs(attributes)</td> 
   <td>Options</td> 
   <td>删除特殊属性并且返回它们。</td> 
  </tr> 
  <tr> 
   <td colspan="3">自定义选择器</td> 
  </tr> 
  <tr> 
   <td>:blank</td> 
   <td>Validator</td> 
   <td>没有值的筛选器。</td> 
  </tr> 
  <tr> 
   <td>:filled</td> 
   <td>Array &lt;Element&gt;</td> 
   <td>有值的筛选器。</td> 
  </tr> 
  <tr> 
   <td>:unchecked</td> 
   <td>Array &lt;Element&gt;</td> 
   <td>没选择的元素的筛选器。</td> 
  </tr> 
  <tr> 
   <td colspan="3">实用工具</td> 
  </tr> 
  <tr> 
   <td>jQuery.format(template,argument,argumentN...)</td> 
   <td>String</td> 
   <td>用参数代替模板中的 {n}。</td> 
  </tr> 
 </tbody> 
</table>

### Validator ###

validate 方法返回一个 Validator 对象。Validator 对象有很多方法可以用来引发校验程序或者改变 form 的内容，下面列出几个常用的方法。

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>返回类型</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>form()</td> 
   <td>Boolean</td> 
   <td>验证 form 返回成功还是失败。</td> 
  </tr> 
  <tr> 
   <td>element(element)</td> 
   <td>Boolean</td> 
   <td>验证单个元素是成功还是失败。</td> 
  </tr> 
  <tr> 
   <td>resetForm()</td> 
   <td>undefined</td> 
   <td>把前面验证的 FORM 恢复到验证前原来的状态。</td> 
  </tr> 
  <tr> 
   <td>showErrors(errors)</td> 
   <td>undefined</td> 
   <td>显示特定的错误信息。</td> 
  </tr> 
  <tr> 
   <td colspan="3">Validator 函数</td> 
  </tr> 
  <tr> 
   <td>setDefaults(defaults)</td> 
   <td>undefined</td> 
   <td>改变默认的设置。</td> 
  </tr> 
  <tr> 
   <td>addMethod(name,method,message)</td> 
   <td>undefined</td> 
   <td>添加一个新的验证方法。必须包括一个独一无二的名字，一个 JAVASCRIPT 的方法和一个默认的信息。</td> 
  </tr> 
  <tr> 
   <td>addClassRules(name,rules)</td> 
   <td>undefined</td> 
   <td>增加组合验证类型，在一个类里面用多种验证方法时比较有用。</td> 
  </tr> 
  <tr> 
   <td>addClassRules(rules)</td> 
   <td>undefined</td> 
   <td>增加组合验证类型，在一个类里面用多种验证方法时比较有用。这个是同时加多个验证方法。</td> 
  </tr> 
 </tbody> 
</table>

### 内置验证方式 ###

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>返回类型</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>required()</td> 
   <td>Boolean</td> 
   <td>必填验证元素。</td> 
  </tr> 
  <tr> 
   <td>required(dependency-expression)</td> 
   <td>Boolean</td> 
   <td>必填元素依赖于表达式的结果。</td> 
  </tr> 
  <tr> 
   <td>required(dependency-callback)</td> 
   <td>Boolean</td> 
   <td>必填元素依赖于回调函数的结果。</td> 
  </tr> 
  <tr> 
   <td>remote(url)</td> 
   <td>Boolean</td> 
   <td>请求远程校验。url 通常是一个远程调用方法。</td> 
  </tr> 
  <tr> 
   <td>minlength(length)</td> 
   <td>Boolean</td> 
   <td>设置最小长度。</td> 
  </tr> 
  <tr> 
   <td>maxlength(length)</td> 
   <td>Boolean</td> 
   <td>设置最大长度。</td> 
  </tr> 
  <tr> 
   <td>rangelength(range)</td> 
   <td>Boolean</td> 
   <td>设置一个长度范围 [min,max]。</td> 
  </tr> 
  <tr> 
   <td>min(value)</td> 
   <td>Boolean</td> 
   <td>设置最小值。</td> 
  </tr> 
  <tr> 
   <td>max(value)</td> 
   <td>Boolean</td> 
   <td>设置最大值。</td> 
  </tr> 
  <tr> 
   <td>email()</td> 
   <td>Boolean</td> 
   <td>验证电子邮箱格式。</td> 
  </tr> 
  <tr> 
   <td>range(range)</td> 
   <td>Boolean</td> 
   <td>设置值的范围。</td> 
  </tr> 
  <tr> 
   <td>url()</td> 
   <td>Boolean</td> 
   <td>验证 URL 格式。</td> 
  </tr> 
  <tr> 
   <td>date()</td> 
   <td>Boolean</td> 
   <td>验证日期格式（类似 30/30/2008 的格式，不验证日期准确性只验证格式）。</td> 
  </tr> 
  <tr> 
   <td>dateISO()</td> 
   <td>Boolean</td> 
   <td>验证 ISO 类型的日期格式。</td> 
  </tr> 
  <tr> 
   <td>dateDE()</td> 
   <td>Boolean</td> 
   <td>验证德式的日期格式（29.04.1994 或 1.1.2006）。</td> 
  </tr> 
  <tr> 
   <td>number()</td> 
   <td>Boolean</td> 
   <td>验证十进制数字（包括小数的）。</td> 
  </tr> 
  <tr> 
   <td>digits()</td> 
   <td>Boolean</td> 
   <td>验证整数。</td> 
  </tr> 
  <tr> 
   <td>creditcard()</td> 
   <td>Boolean</td> 
   <td>验证信用卡号。</td> 
  </tr> 
  <tr> 
   <td>accept(extension)</td> 
   <td>Boolean</td> 
   <td>验证相同后缀名的字符串。</td> 
  </tr> 
  <tr> 
   <td>equalTo(other)</td> 
   <td>Boolean</td> 
   <td>验证两个输入框的内容是否相同。</td> 
  </tr> 
  <tr> 
   <td>phoneUS()</td> 
   <td>Boolean</td> 
   <td>验证美式的电话号码。</td> 
  </tr> 
 </tbody> 
</table>

### validate ()的可选项 ###

<table> 
 <tbody> 
  <tr> 
   <th>描述</th> 
   <th>代码</th> 
  </tr> 
  <tr> 
   <td>debug：进行调试模式（表单不提交）。</td> 
   <td> <pre><code>$(".selector").validate
({
	debug:true
})</code></pre> </td> 
  </tr> 
  <tr> 
   <td>把调试设置为默认。</td> 
   <td> <pre><code>$.validator.setDefaults({
	debug:true
})</code></pre> </td> 
  </tr> 
  <tr> 
   <td>submitHandler：通过验证后运行的函数，里面要加上表单提交的函数，否则表单不会提交。</td> 
   <td> <pre><code>$(".selector").validate({
	submitHandler:function(form) {
		$(form).ajaxSubmit();
	}
})</code></pre> </td> 
  </tr> 
  <tr> 
   <td>ignore：对某些元素不进行验证。</td> 
   <td> <pre><code>$("#myform").validate({
	ignore:".ignore"
})</code></pre> </td> 
  </tr> 
  <tr> 
   <td>rules：自定义规则，key:value 的形式，key 是要验证的元素，value 可以是字符串或对象。</td> 
   <td> <pre><code>$(".selector").validate({
	rules:{
		name:"required",
		email:{
			required:true,
			email:true
		}
	}
})</code></pre> </td> 
  </tr> 
  <tr> 
   <td>messages：自定义的提示信息，key:value 的形式，key 是要验证的元素，value 可以是字符串或函数。</td> 
   <td> <pre><code>$(".selector").validate({
	rules:{
		name:"required",
		email:{
			required:true,
			email:true
		}
	},
	messages:{
		name:"Name不能为空",
		email:{       
			required:"E-mail不能为空",
			email:"E-mail地址不正确"
		}
	}
})</code></pre> </td> 
  </tr> 
  <tr> 
   <td>groups：对一组元素的验证，用一个错误提示，用 errorPlacement 控制把出错信息放在哪里。</td> 
   <td> <pre><code>$("#myform").validate({
	groups:{
		username:"fname 
		lname"
	},
	errorPlacement:function(error,element) {
		if (element.attr("name") == "fname" || element.attr("name") == "lname")   
			error.insertAfter("#lastname");
		else    
			error.insertAfter(element);
	},
   debug:true
})</code></pre> </td> 
  </tr> 
  <tr> 
   <td>OnSubmit：类型 Boolean，默认 true，指定是否提交时验证。</td> 
   <td> <pre><code>$(".selector").validate({  
	onsubmit:false
})</code></pre> </td> 
  </tr> 
  <tr> 
   <td>onfocusout：类型 Boolean，默认 true，指定是否在获取焦点时验证。</td> 
   <td> <pre><code>$(".selector").validate({   
	onfocusout:false
})</code></pre> </td> 
  </tr> 
  <tr> 
   <td>onkeyup：类型 Boolean，默认 true，指定是否在敲击键盘时验证。</td> 
   <td> <pre><code>$(".selector").validate({
   onkeyup:false
})</code></pre> </td> 
  </tr> 
  <tr> 
   <td>onclick：类型 Boolean，默认 true，指定是否在鼠标点击时验证（一般验证 checkbox、radiobox）。</td> 
   <td> <pre><code>$(".selector").validate({
   onclick:false
})</code></pre> </td> 
  </tr> 
  <tr> 
   <td>focusInvalid：类型 Boolean，默认 true。提交表单后，未通过验证的表单（第一个或提交之前获得焦点的未通过验证的表单）会获得焦点。</td> 
   <td> <pre><code>$(".selector").validate({
   focusInvalid:false
})</code></pre> </td> 
  </tr> 
  <tr> 
   <td>focusCleanup：类型 Boolean，默认 false。当未通过验证的元素获得焦点时，移除错误提示（避免和 focusInvalid 一起使用）。</td> 
   <td> <pre><code>$(".selector").validate({
   focusCleanup:true
})</code></pre> </td> 
  </tr> 
  <tr> 
   <td>errorClass：类型 String，默认 "error"。指定错误提示的 css 类名，可以自定义错误提示的样式。</td> 
   <td> <pre><code>$(".selector").validate({ 
	errorClass:"invalid"
})</code></pre> </td> 
  </tr> 
  <tr> 
   <td>errorElement：类型 String，默认 "label"。指定使用什么标签标记错误。</td> 
   <td> <pre><code>$(".selector").validate
   errorElement:"em"
})</code></pre> </td> 
  </tr> 
  <tr> 
   <td>wrapper：类型 String，指定使用什么标签再把上边的 errorELement 包起来。</td> 
   <td> <pre><code>$(".selector").validate({
   wrapper:"li"
})</code></pre> </td> 
  </tr> 
  <tr> 
   <td>errorLabelContainer：类型 Selector，把错误信息统一放在一个容器里面。</td> 
   <td> <pre><code>$("#myform").validate({   
	errorLabelContainer:"#messageBox",
	wrapper:"li",
	submitHandler:function() { 
		alert("Submitted!") 
	}
})</code></pre> </td> 
  </tr> 
  <tr> 
   <td>showErrors：跟一个函数，可以显示总共有多少个未通过验证的元素。</td> 
   <td> <pre><code>$(".selector").validate({  
	showErrors:function(errorMap,errorList) {
        $("#summary").html("Your form contains " + this.numberOfInvalids() + " errors,see details below.");
		this.defaultShowErrors();
	}
})</code></pre> </td> 
  </tr> 
  <tr> 
   <td>errorPlacement：跟一个函数，可以自定义错误放到哪里。</td> 
   <td> <pre><code>$("#myform").validate({  
	errorPlacement:function(error,element) {  
		error.appendTo(element.parent("td").next("td"));
   },
   debug:true
})</code></pre> </td> 
  </tr> 
  <tr> 
   <td>success：要验证的元素通过验证后的动作，如果跟一个字符串，会当作一个 css 类，也可跟一个函数。</td> 
   <td> <pre><code>$("#myform").validate({        
	success:"valid",
        submitHandler:function() { 
			alert("Submitted!") 
		}
})</code></pre> </td> 
  </tr> 
  <tr> 
   <td>highlight：可以给未通过验证的元素加效果、闪烁等。</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

### addMethod(name,method,message)方法 ###

参数 name 是添加的方法的名字。

参数 method 是一个函数，接收三个参数 (value,element,param) 。  
value 是元素的值，element 是元素本身，param 是参数。

我们可以用 addMethod 来添加除内置的 Validation 方法之外的验证方法。比如有一个字段，只能输一个字母，范围是 a-f，写法如下：

$.validator.addMethod("af",function(value,element,params){  
    	if(value.length>1){
    		return false;
    	}
        if(value>=params[0] && value<=params[1]){
    		return true;
    	}else{
    		return false;
    	}
    },"必须是一个字母,且a-f");

如果有个表单字段的 id="username"，则在 rules 中写：

username:{
       af:["a","f"]
    }

addMethod 的第一个参数，是添加的验证方法的名字，这时是 af。  
addMethod 的第三个参数，是自定义的错误提示，这里的提示为:"必须是一个字母,且a-f"。  
addMethod 的第二个参数，是一个函数，这个比较重要，决定了用这个验证方法时的写法。

如果只有一个参数，直接写，比如 af:"a"，那么 a 就是这个唯一的参数，如果多个参数，则写在 \[\] 里，用逗号分开。

### meta String 方式 ###

$("#myform").validate({
    
       meta:"validate",
    
       submitHandler:function() { 
    alert("Submitted!") }
    
    })

指定错误内容的位置

errorLabelContainer:".erro",  
wrapper:"li",  
showErrors:function(errorMap,errorList) \{  
this.defaultShowErrors();  
$('ol li:hidden').remove()//删除所有隐藏的li标签  
$('ol li:eq(0)').nextAll().remove()//第一个li下所有跟随的同胞级li删除

**验证输入是否是中英文**

jQuery.validator.addMethod("english", function (value, element) {
    
    var chrnum = /^[a-zA-Z\u4e00-\u9fa5]+$/;
    
    return this.optional(element) || (chrnum.test(value));
    
    }, "只能输入中英文");

** 注:可以通过设置validClass：'验证成功时的class类名'来解除当验证成功后，再清空数据时样式保留的错误。**

**xml解析失败，通常是标签未闭合或含有非法字符。**