Name

Type

validate( options ) 

Returns: Validator 

验证所选的FORM

valid( ) 

Returns: Boolean 

检查是否验证通过

rules( ) 

Returns: Options 

返回元素的验证规则

rules( "add", rules ) 

Returns: Options 

增加验证规则。

rules( "remove", rules ) 

Returns: Options 

删除验证规则

removeAttrs( attributes ) 

Returns: Options 

删除特殊属性并且返回他们

Name

Type

Name

Type

:blank 

Returns: Array <Element >

没有值的筛选器

:filled 

Returns: Array <Element >

有值的筛选器

:unchecked 

Returns: Array <Element >

没选择的元素的筛选器

Name

Type

Name

Type

jQuery.format( template, argument , argumentN... ) 

Returns: String 

用参数代替模板中的 {n}。

Name

Type

Name

Type

form( ) 

Returns: Boolean 

验证form返回成功还是失败

element( element ) 

Returns: Boolean 

验证单个元素是成功还是失败

resetForm( ) 

Returns: undefined

把前面验证的FORM恢复到验证前原来的状态

showErrors( errors ) 

Returns: undefined

显示特定的错误信息

Name

Type

Name

Type

setDefaults( defaults ) 

Returns: undefined

改变默认的设置

addMethod( name, method, message ) 

Returns: undefined

添加一个新的验证方法. 必须包括一个独一无二的名字，一个JAVASCRIPT的方法和一个默认的信息

addClassRules( name, rules ) 

Returns: undefined

增加组合验证类型 在一个类里面用多种验证方法里比较有用

addClassRules( rules ) 

Returns: undefined

增加组合验证类型 在一个类里面用多种验证方法里比较有用，这个是一下子加多个

Name

Type

Name

Type

required( ) 

Returns: Boolean 

必填验证元素

required( dependency-expression ) 

Returns: Boolean 

必填元素依赖于表达式的结果.

required( dependency-callback ) 

Returns: Boolean 

必填元素依赖于回调函数的结果.

remote( url ) 

Returns: Boolean 

请求远程校验。url通常是一个远程调用方法

minlength( length ) 

Returns: Boolean 

设置最小长度

maxlength( length ) 

Returns: Boolean 

设置最大长度

rangelength( range ) 

Returns: Boolean 

设置一个长度范围[min,max]

min( value ) 

Returns: Boolean 

设置最小值.

max( value ) 

Returns: Boolean 

设置最大值.

range( range ) 

Returns: Boolean 

设置值的范围

email( ) 

Returns: Boolean 

验证电子邮箱格式

url( ) 

Returns: Boolean 

验证连接格式

date( ) 

Returns: Boolean 

验证日期格式(类似30/30/2008的格式，不验证日期准确性只验证格式)

dateISO( ) 

Returns: Boolean 

研制ISO类型的日期格式

dateDE( ) 

Returns: Boolean 

验证德式的日期格式（29.04.1994 or 1.1.2006）

number( ) 

Returns: Boolean 

验证十进制数字（包括小数的）

numberDE( ) 

Returns: Boolean 

Makes the element require a decimal number with german format.

digits( ) 

Returns: Boolean 

验证整数

creditcard( ) 

Returns: Boolean 

验证信用卡号

accept( extension ) 

Returns: Boolean 

验证相同后缀名的字符串

equalTo( other ) 

Returns: Boolean 

验证两个输入框的内容是否相同

Name

Type

phoneUS( ) 

Returns: Boolean 

验证美式的电话号码

nsubmit

Boolean 

Default: true

提交时验证. 设置唯false就用其他方法去验证

· Code

不用onsubmit验证,就允许用户无论用什么方法去验证,而是提交时, 用 keyup/blur/click 等方法.

$(".selector").validate({

   onsubmit: false

})

onfocusout

Boolean 

Default: true

Validate elements (except checkboxes/radio buttons) on blur. If nothing is entered, all rules are skipped, except when the field was already marked as invalid.

· Code

Disables onblur validation.

$(".selector").validate({

   onfocusout: false

})

onkeyup

Boolean 

Default: true

在keyup时验证. As long as the field is not marked as invalid, nothing happens. Otherwise, all rules are checked on each key up event.

· Code

Disables onkeyup validation.

$(".selector").validate({

   onkeyup: false

})

onclick

Boolean 

Default: true

在checkboxes 和 radio 点击时验证.

· Code

Disables onclick validation of checkboxes and radio buttons.

$(".selector").validate({

   onclick: false

})

focusInvalid

Boolean 

Default: true

把焦点聚焦在最后一个动作或者最近的一次出错上via validator.focusInvalid(). The last active element is the one that had focus when the form was submitted, avoiding to steal its focus. If there was no element focused, the first one in the form gets it, unless this option is turned off.

· Code

Disables focusing of invalid elements.

$(".selector").validate({

   focusInvalid: false

})

focusCleanup

Boolean 

Default: false

如果是true那么删除出错类从出错的元素上并且隐藏出错信息当这个元素被聚焦 .避免和 focusInvalid.一起用

· Code

Enables cleanup when focusing elements, removing the error class and hiding error messages when an element is focused.

$(".selector").validate({

   focusCleanup: true

})

meta

String 

为了元数据使用其他插件你要包装 你的验证规则 在他们自己的项目中可以用这个特殊的选项

Tell the validation plugin to look inside a validate-property in metadata for validation rules.

$("#myform").validate({

   meta: "validate",

   submitHandler: function() { alert("Submitted!") }

})

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

  <script src="http://www.mamicode.com/http://code.jquery.com/jquery-latest.js"></script>

  <script>

  $(document).ready(function(){

    $("#myform").validate({

     meta: "validate",

     submitHandler: function() { alert("Submitted!") }

    })

  });

  </script>

</head>

<body>

  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.metadata.js"></script>

  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>

<form id="myform">

  <input type="text" name="email" class="{validate:{ required: true, email:true }}" />

  <br/>

  <input type="submit" value="http://www.mamicode.com/Submit" />

</form>

</body>

</html>

errorClass

String 

Default: "error"

创建错误类的名字为了去寻找存在的错误标签和增加它到验证失败的元素中去。

· Code

Sets the error class to "invalid".

$(".selector").validate({

   errorClass: "invalid"

})

errorElement

String 

Default: "label"

设置错误的元素，默认的是label你可以改成em.Use this element type to create error messages and to look for existing error messages. The default, "label", has the advantage of creating a meaningful link between error message and invalid field using the for attribute (which is always used, no matter the element type).

· Code

Sets the error element to "em".

$(".selector").validate

   errorElement: "em"

})

wrapper

String 

在出错信息外用其他的元素包装一层。Wrap error labels with the specified element. Useful in combination with errorLabelContainer to create a list of error messages.

· Code

Wrap each error element with a list item, useful when using an ordered or unordered list as the error container.

$(".selector").validate({

   wrapper: "li"

})

errorLabelContainer

Selector 

把错误信息统一放在一个容器里面。Hide and show this container when validating.

All error labels are displayed inside an unordered list with the ID "messageBox", as specified by the selector passed as errorContainer option. All error elements are wrapped inside an li element, to create a list of messages.

$("#myform").validate({

   errorLabelContainer: "#messageBox",

   wrapper: "li",

   submitHandler: function() { alert("Submitted!") }

})

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

  <script src="http://www.mamicode.com/http://code.jquery.com/jquery-latest.js"></script>

  <script>

    $(document).ready(function(){

      $("#myform").validate({

        errorLabelContainer: "#messageBox",

        wrapper: "li",

        submitHandler: function() { alert("Submitted!") }

      })

    });

  </script>

</head>

<body>

  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>

<ul id="messageBox"></ul>

 <form id="myform" action="/login" method="post">

   <label>Firstname</label>

   <input name="fname" class="required" />

   <label>Lastname</label>

   <input name="lname" title="Your lastname, please!" class="required" />

   <br/>

   <input type="submit" value="http://www.mamicode.com/Submit"/>

 </form>

</body>

</html>

errorContainer

Selector 

显示或者隐藏验证信息

使用一个额外的容器去显示错误信息

Uses an additonal container for error messages. The elements given as the errorContainer are all shown and hidden when errors occur. But the error labels themselve are added to the element(s) given as errorLabelContainer, here an unordered list. Therefore the error labels are also wrapped into li elements (wrapper option).

$("#myform").validate({

   errorContainer: "#messageBox1, #messageBox2",

   errorLabelContainer: "#messageBox1 ul",

   wrapper: "li", debug:true,

   submitHandler: function() { alert("Submitted!") }

})

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

  <script src="http://www.mamicode.com/http://code.jquery.com/jquery-latest.js"></script>

  <script>

  $(document).ready(function(){

    $("#myform").validate({

       errorContainer: "#messageBox1, #messageBox2",

       errorLabelContainer: "#messageBox1 ul",

       wrapper: "li", debug:true,

       submitHandler: function() { alert("Submitted!") }

    })

  });

  </script>

  <style>#messageBox1, #messageBox2 { display: none }</style>

</head>

<body>

  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>

<div id="messageBox1">

  <ul></ul>

</div>

<form id="myform" action="/login" method="post">

  <label>Firstname</label>

  <input name="fname" class="required" />

  <label>Lastname</label>

  <input name="lname" title="Your lastname, please!" class="required" />

  <br/>

  <input type="submit" value="http://www.mamicode.com/Submit"/>

</form>

<div id="messageBox2">

  <h3>There are errors in your form, see details above!</h3>

</div>

</body>

</html>

showErrors

Callback 

Default: None, uses built-in message disply.

得到错误的显示句柄

 Gets the map of errors as the first argument and and array of errors as the second, called in the context of the validator object. The arguments contain only those elements currently validated, which can be a single element when doing validation onblur/keyup. You can trigger (in addition to your own messages) the default behaviour by calling this.defaultShowErrors().

· Code

Update the number of invalid elements each time an error is displayed. Delegates to the default implementation for the actual error display.

$(".selector").validate({

   showErrors: function(errorMap, errorList) {

$("#summary").html("Your form contains " + this.numberOfInvalids() + " errors, see details below.");

this.defaultShowErrors();

   }

})

errorPlacement

Callback 

Default: 把错误label放在验证的元素后面

可选错误label的放置位置. First argument: The created error label as a jQuery object. Second argument: The invalid element as a jQuery object.

Use a table layout for the form, placing error messags in the next cell after the input.

$("#myform").validate({

  errorPlacement: function(error, element) {

     error.appendTo( element.parent("td").next("td") );

   },

   debug:true

 })

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

  <script src="http://www.mamicode.com/http://code.jquery.com/jquery-latest.js"></script>

  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>

  <script>

  $(document).ready(function(){

    $("#myform").validate({

       errorPlacement: function(error, element) {

         error.appendTo( element.parent("td").next("td") );

       },

       debug:true

     })

  });

  </script>

</head>

<body>

  <form id="myform" action="/login" method="post">

<table>

<tr>

<td><label>Firstname</label>

<td><input name="fname" class="required" value="http://www.mamicode.com/Pete" /></td>

<td></td>

</tr>

<tr>

<td><label>Lastname</label></td>

<td><input name="lname" title="Your lastname, please!" class="required" /></td>

<td></td>

</tr>

<tr>

<td></td><td><input type="submit" value="http://www.mamicode.com/Submit"/></td><td></td>

</table>

</form>

</body>

</html>

success

String , Callback 

成功时的class.If specified, the error label is displayed to show a valid element. If a String is given, its added as a class to the label. If a Function is given, its called with the label (as a jQuery object) as its only argument. That can be used to add a text like "ok!".

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

$("#myform").validate({

success: "valid",

submitHandler: function() { alert("Submitted!") }

})

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

  <script src="http://www.mamicode.com/http://code.jquery.com/jquery-latest.js"></script>

  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>

  <script>

  $(document).ready(function(){

    $("#myform").validate({

   success: "valid",

   submitHandler: function() { alert("Submitted!") }

     })

  });

  </script>

  <style>label.valid {

background: url(‘http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif‘) no-repeat;

height:16px;

width:16px;

display: block;

position: absolute;

top: 4px;

left: 152px;

}</style>

</head>

<body>

<form id="myform">

  <input type="text" name="email" class="required" />

  <br/>

  <input type="submit" value="http://www.mamicode.com/Submit" />

</form>

</body>

</html>

添加"valid" 到验证验证元素, 在CSS中定义的样式,并加入“ok”的文字

$("#myform").validate({

   success: function(label) {

     label.addClass("valid").text("Ok!")

   },

   submitHandler: function() { alert("Submitted!") }

})

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

  <script src="http://www.mamicode.com/http://code.jquery.com/jquery-latest.js"></script>

  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>

  <script>

  $(document).ready(function(){

        $("#myform").validate({

   success: function(label) {

     label.addClass("valid").text("Ok!")

     },

     submitHandler: function() { alert("Submitted!") }

        })

   });

  </script>

  <style>label.valid {

background: url(‘http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif‘) no-repeat;

height:16px;

width:16px;

display: block;

position: absolute;

top: 4px;

left: 152px;

padding-left: 18px;

}</style>

</head>

<body>

<form id="myform">

  <input type="text" name="email" class="required" />

  <br/>

  <input type="submit" value="http://www.mamicode.com/Submit" />

</form>

</body>

</html>

highlight

Callback 

Default: Adds errorClass (see the option) to the Element 

高亮显示错误信息。 或者说重写出错时的出错元素的显示。Override to decide which fields and how to highlight.

· Code

Highlights an invalid element by fading it out and in again.

$(".selector").validate({

  highlight: function(element, errorClass) {

     $(element).fadeOut(function() {

       $(element).fadeIn()

     })

  }

})

· Code

Adds the error class to both the invalid element and it‘s label

$(".selector").validate({

  highlight: function(element, errorClass) {

     $(element).addClass(errorClass);

     $(element.form).find("label[for=" + element.id + "]").addClass(errorClass);

  },

  unhighlight: function(element, errorClass) {

     $(element).removeClass(errorClass);

     $(element.form).find("label[for=" + element.id + "]").removeClass(errorClass);

  }

});

unhighlight

Callback 

Default: 默认是去掉error类

Called to revert changes made by option highlight, same arguments as highlight.

Name

Type

validate( options ) 

Returns: Validator 

验证所选的FORM

valid( ) 

Returns: Boolean 

检查是否验证通过

rules( ) 

Returns: Options 

返回元素的验证规则

rules( "add", rules ) 

Returns: Options 

增加验证规则。

rules( "remove", rules ) 

Returns: Options 

删除验证规则

removeAttrs( attributes ) 

Returns: Options 

删除特殊属性并且返回他们

Name

Type

Name

Type

:blank 

Returns: Array <Element >

没有值的筛选器

:filled 

Returns: Array <Element >

有值的筛选器

:unchecked 

Returns: Array <Element >

没选择的元素的筛选器

Name

Type

Name

Type

jQuery.format( template, argument , argumentN... ) 

Returns: String 

用参数代替模板中的 {n}。

Name

Type

Name

Type

form( ) 

Returns: Boolean 

验证form返回成功还是失败

element( element ) 

Returns: Boolean 

验证单个元素是成功还是失败

resetForm( ) 

Returns: undefined

把前面验证的FORM恢复到验证前原来的状态

showErrors( errors ) 

Returns: undefined

显示特定的错误信息

Name

Type

Name

Type

setDefaults( defaults ) 

Returns: undefined

改变默认的设置

addMethod( name, method, message ) 

Returns: undefined

添加一个新的验证方法. 必须包括一个独一无二的名字，一个JAVASCRIPT的方法和一个默认的信息

addClassRules( name, rules ) 

Returns: undefined

增加组合验证类型 在一个类里面用多种验证方法里比较有用

addClassRules( rules ) 

Returns: undefined

增加组合验证类型 在一个类里面用多种验证方法里比较有用，这个是一下子加多个

Name

Type

Name

Type

required( ) 

Returns: Boolean 

必填验证元素

required( dependency-expression ) 

Returns: Boolean 

必填元素依赖于表达式的结果.

required( dependency-callback ) 

Returns: Boolean 

必填元素依赖于回调函数的结果.

remote( url ) 

Returns: Boolean 

请求远程校验。url通常是一个远程调用方法

minlength( length ) 

Returns: Boolean 

设置最小长度

maxlength( length ) 

Returns: Boolean 

设置最大长度

rangelength( range ) 

Returns: Boolean 

设置一个长度范围[min,max]

min( value ) 

Returns: Boolean 

设置最小值.

max( value ) 

Returns: Boolean 

设置最大值.

range( range ) 

Returns: Boolean 

设置值的范围

email( ) 

Returns: Boolean 

验证电子邮箱格式

url( ) 

Returns: Boolean 

验证连接格式

date( ) 

Returns: Boolean 

验证日期格式(类似30/30/2008的格式，不验证日期准确性只验证格式)

dateISO( ) 

Returns: Boolean 

研制ISO类型的日期格式

dateDE( ) 

Returns: Boolean 

验证德式的日期格式（29.04.1994 or 1.1.2006）

number( ) 

Returns: Boolean 

验证十进制数字（包括小数的）

numberDE( ) 

Returns: Boolean 

Makes the element require a decimal number with german format.

digits( ) 

Returns: Boolean 

验证整数

creditcard( ) 

Returns: Boolean 

验证信用卡号

accept( extension ) 

Returns: Boolean 

验证相同后缀名的字符串

equalTo( other ) 

Returns: Boolean 

验证两个输入框的内容是否相同

Name

Type

phoneUS( ) 

Returns: Boolean 

验证美式的电话号码

nsubmit

Boolean 

Default: true

提交时验证. 设置唯false就用其他方法去验证

· Code

不用onsubmit验证,就允许用户无论用什么方法去验证,而是提交时, 用 keyup/blur/click 等方法.

$(".selector").validate({

   onsubmit: false

})

onfocusout

Boolean 

Default: true

Validate elements (except checkboxes/radio buttons) on blur. If nothing is entered, all rules are skipped, except when the field was already marked as invalid.

· Code

Disables onblur validation.

$(".selector").validate({

   onfocusout: false

})

onkeyup

Boolean 

Default: true

在keyup时验证. As long as the field is not marked as invalid, nothing happens. Otherwise, all rules are checked on each key up event.

· Code

Disables onkeyup validation.

$(".selector").validate({

   onkeyup: false

})

onclick

Boolean 

Default: true

在checkboxes 和 radio 点击时验证.

· Code

Disables onclick validation of checkboxes and radio buttons.

$(".selector").validate({

   onclick: false

})

focusInvalid

Boolean 

Default: true

把焦点聚焦在最后一个动作或者最近的一次出错上via validator.focusInvalid(). The last active element is the one that had focus when the form was submitted, avoiding to steal its focus. If there was no element focused, the first one in the form gets it, unless this option is turned off.

· Code

Disables focusing of invalid elements.

$(".selector").validate({

   focusInvalid: false

})

focusCleanup

Boolean 

Default: false

如果是true那么删除出错类从出错的元素上并且隐藏出错信息当这个元素被聚焦 .避免和 focusInvalid.一起用

· Code

Enables cleanup when focusing elements, removing the error class and hiding error messages when an element is focused.

$(".selector").validate({

   focusCleanup: true

})

meta

String 

为了元数据使用其他插件你要包装 你的验证规则 在他们自己的项目中可以用这个特殊的选项

Tell the validation plugin to look inside a validate-property in metadata for validation rules.

$("#myform").validate({

   meta: "validate",

   submitHandler: function() { alert("Submitted!") }

})

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

  <script src="http://www.mamicode.com/http://code.jquery.com/jquery-latest.js"></script>

  <script>

  $(document).ready(function(){

    $("#myform").validate({

     meta: "validate",

     submitHandler: function() { alert("Submitted!") }

    })

  });

  </script>

</head>

<body>

  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.metadata.js"></script>

  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>

<form id="myform">

  <input type="text" name="email" class="{validate:{ required: true, email:true }}" />

  <br/>

  <input type="submit" value="http://www.mamicode.com/Submit" />

</form>

</body>

</html>

errorClass

String 

Default: "error"

创建错误类的名字为了去寻找存在的错误标签和增加它到验证失败的元素中去。

· Code

Sets the error class to "invalid".

$(".selector").validate({

   errorClass: "invalid"

})

errorElement

String 

Default: "label"

设置错误的元素，默认的是label你可以改成em.Use this element type to create error messages and to look for existing error messages. The default, "label", has the advantage of creating a meaningful link between error message and invalid field using the for attribute (which is always used, no matter the element type).

· Code

Sets the error element to "em".

$(".selector").validate

   errorElement: "em"

})

wrapper

String 

在出错信息外用其他的元素包装一层。Wrap error labels with the specified element. Useful in combination with errorLabelContainer to create a list of error messages.

· Code

Wrap each error element with a list item, useful when using an ordered or unordered list as the error container.

$(".selector").validate({

   wrapper: "li"

})

errorLabelContainer

Selector 

把错误信息统一放在一个容器里面。Hide and show this container when validating.

All error labels are displayed inside an unordered list with the ID "messageBox", as specified by the selector passed as errorContainer option. All error elements are wrapped inside an li element, to create a list of messages.

$("#myform").validate({

   errorLabelContainer: "#messageBox",

   wrapper: "li",

   submitHandler: function() { alert("Submitted!") }

})

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

  <script src="http://www.mamicode.com/http://code.jquery.com/jquery-latest.js"></script>

  <script>

    $(document).ready(function(){

      $("#myform").validate({

        errorLabelContainer: "#messageBox",

        wrapper: "li",

        submitHandler: function() { alert("Submitted!") }

      })

    });

  </script>

</head>

<body>

  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>

<ul id="messageBox"></ul>

 <form id="myform" action="/login" method="post">

   <label>Firstname</label>

   <input name="fname" class="required" />

   <label>Lastname</label>

   <input name="lname" title="Your lastname, please!" class="required" />

   <br/>

   <input type="submit" value="http://www.mamicode.com/Submit"/>

 </form>

</body>

</html>

errorContainer

Selector 

显示或者隐藏验证信息

使用一个额外的容器去显示错误信息

Uses an additonal container for error messages. The elements given as the errorContainer are all shown and hidden when errors occur. But the error labels themselve are added to the element(s) given as errorLabelContainer, here an unordered list. Therefore the error labels are also wrapped into li elements (wrapper option).

$("#myform").validate({

   errorContainer: "#messageBox1, #messageBox2",

   errorLabelContainer: "#messageBox1 ul",

   wrapper: "li", debug:true,

   submitHandler: function() { alert("Submitted!") }

})

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

  <script src="http://www.mamicode.com/http://code.jquery.com/jquery-latest.js"></script>

  <script>

  $(document).ready(function(){

    $("#myform").validate({

       errorContainer: "#messageBox1, #messageBox2",

       errorLabelContainer: "#messageBox1 ul",

       wrapper: "li", debug:true,

       submitHandler: function() { alert("Submitted!") }

    })

  });

  </script>

  <style>#messageBox1, #messageBox2 { display: none }</style>

</head>

<body>

  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>

<div id="messageBox1">

  <ul></ul>

</div>

<form id="myform" action="/login" method="post">

  <label>Firstname</label>

  <input name="fname" class="required" />

  <label>Lastname</label>

  <input name="lname" title="Your lastname, please!" class="required" />

  <br/>

  <input type="submit" value="http://www.mamicode.com/Submit"/>

</form>

<div id="messageBox2">

  <h3>There are errors in your form, see details above!</h3>

</div>

</body>

</html>

showErrors

Callback 

Default: None, uses built-in message disply.

得到错误的显示句柄

 Gets the map of errors as the first argument and and array of errors as the second, called in the context of the validator object. The arguments contain only those elements currently validated, which can be a single element when doing validation onblur/keyup. You can trigger (in addition to your own messages) the default behaviour by calling this.defaultShowErrors().

· Code

Update the number of invalid elements each time an error is displayed. Delegates to the default implementation for the actual error display.

$(".selector").validate({

   showErrors: function(errorMap, errorList) {

$("#summary").html("Your form contains " + this.numberOfInvalids() + " errors, see details below.");

this.defaultShowErrors();

   }

})

errorPlacement

Callback 

Default: 把错误label放在验证的元素后面

可选错误label的放置位置. First argument: The created error label as a jQuery object. Second argument: The invalid element as a jQuery object.

Use a table layout for the form, placing error messags in the next cell after the input.

$("#myform").validate({

  errorPlacement: function(error, element) {

     error.appendTo( element.parent("td").next("td") );

   },

   debug:true

 })

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

  <script src="http://www.mamicode.com/http://code.jquery.com/jquery-latest.js"></script>

  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>

  <script>

  $(document).ready(function(){

    $("#myform").validate({

       errorPlacement: function(error, element) {

         error.appendTo( element.parent("td").next("td") );

       },

       debug:true

     })

  });

  </script>

</head>

<body>

  <form id="myform" action="/login" method="post">

<table>

<tr>

<td><label>Firstname</label>

<td><input name="fname" class="required" value="http://www.mamicode.com/Pete" /></td>

<td></td>

</tr>

<tr>

<td><label>Lastname</label></td>

<td><input name="lname" title="Your lastname, please!" class="required" /></td>

<td></td>

</tr>

<tr>

<td></td><td><input type="submit" value="http://www.mamicode.com/Submit"/></td><td></td>

</table>

</form>

</body>

</html>

success

String , Callback 

成功时的class.If specified, the error label is displayed to show a valid element. If a String is given, its added as a class to the label. If a Function is given, its called with the label (as a jQuery object) as its only argument. That can be used to add a text like "ok!".

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

$("#myform").validate({

success: "valid",

submitHandler: function() { alert("Submitted!") }

})

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

  <script src="http://www.mamicode.com/http://code.jquery.com/jquery-latest.js"></script>

  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>

  <script>

  $(document).ready(function(){

    $("#myform").validate({

   success: "valid",

   submitHandler: function() { alert("Submitted!") }

     })

  });

  </script>

  <style>label.valid {

background: url(‘http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif‘) no-repeat;

height:16px;

width:16px;

display: block;

position: absolute;

top: 4px;

left: 152px;

}</style>

</head>

<body>

<form id="myform">

  <input type="text" name="email" class="required" />

  <br/>

  <input type="submit" value="http://www.mamicode.com/Submit" />

</form>

</body>

</html>

添加"valid" 到验证验证元素, 在CSS中定义的样式,并加入“ok”的文字

$("#myform").validate({

   success: function(label) {

     label.addClass("valid").text("Ok!")

   },

   submitHandler: function() { alert("Submitted!") }

})

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

  <script src="http://www.mamicode.com/http://code.jquery.com/jquery-latest.js"></script>

  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>

  <script>

  $(document).ready(function(){

        $("#myform").validate({

   success: function(label) {

     label.addClass("valid").text("Ok!")

     },

     submitHandler: function() { alert("Submitted!") }

        })

   });

  </script>

  <style>label.valid {

background: url(‘http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif‘) no-repeat;

height:16px;

width:16px;

display: block;

position: absolute;

top: 4px;

left: 152px;

padding-left: 18px;

}</style>

</head>

<body>

<form id="myform">

  <input type="text" name="email" class="required" />

  <br/>

  <input type="submit" value="http://www.mamicode.com/Submit" />

</form>

</body>

</html>

highlight

Callback 

Default: Adds errorClass (see the option) to the Element 

高亮显示错误信息。 或者说重写出错时的出错元素的显示。Override to decide which fields and how to highlight.

· Code

Highlights an invalid element by fading it out and in again.

$(".selector").validate({

  highlight: function(element, errorClass) {

     $(element).fadeOut(function() {

       $(element).fadeIn()

     })

  }

})

· Code

Adds the error class to both the invalid element and it‘s label

$(".selector").validate({

  highlight: function(element, errorClass) {

     $(element).addClass(errorClass);

     $(element.form).find("label[for=" + element.id + "]").addClass(errorClass);

  },

  unhighlight: function(element, errorClass) {

     $(element).removeClass(errorClass);

     $(element.form).find("label[for=" + element.id + "]").removeClass(errorClass);

  }

});

unhighlight

Callback 

Default: 默认是去掉error类

Called to revert changes made by option highlight, same arguments as highlight.