jquery.validate.js

来源：互联网发布：期货高频交易软件编辑：程序博客网时间：2024/05/22 01:34

jquery.validate.js是jquery旗下的一个验证框架，借助jquery的优势，我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法，并且对国际化也有很好的支持

使用这个函数很简单，看以下的代码

Html代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<scriptsrc="http://code.jquery.com/jquery-latest.js"></script>
<linkrel="stylesheet"href="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.css"type="text/css"media="screen"/>
<scripttype="text/javascript"src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<styletype="text/css">
* { font-family: Verdana; font-size: 96%; }
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
</style>
<script>
$(document).ready(function(){
$("#commentForm").validate();
});
</script>
</head>
<body>
<formclass="cmxform"id="commentForm"method="get"action="">
<fieldset>
<legend>A simple comment form with submit validation and default messages</legend>
<p>
<labelfor="cname">Name</label>
<em>*</em><inputid="cname"name="name"size="25"class="required"minlength="2"/>
</p>
<p>
<labelfor="cemail">E-Mail</label>
<em>*</em><inputid="cemail"name="email"size="25" class="required email"/>
</p>
<p>
<labelfor="curl">URL</label>
<em> </em><inputid="curl"name="url"size="25" class="url"value=""/>
</p>
<p>
<labelfor="ccomment">Your comment</label>
<em>*</em><textareaid="ccomment"name="comment"cols="22" class="required"></textarea>
</p>
<p>
<inputclass="submit"type="submit"value="Submit"/>
</p>
</fieldset>
</form>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head>  <script src="http://code.jquery.com/jquery-latest.js"></script>  <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.css" type="text/css" media="screen" /><script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script><style type="text/css">* { font-family: Verdana; font-size: 96%; }label { width: 10em; float: left; }label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }p { clear: both; }.submit { margin-left: 12em; }em { font-weight: bold; padding-right: 1em; vertical-align: top; }</style>  <script>  $(document).ready(function(){    $("#commentForm").validate();  });  </script>  </head><body>   <form class="cmxform" id="commentForm" method="get" action=""> <fieldset>   <legend>A simple comment form with submit validation and default messages</legend>   <p>     <label for="cname">Name</label>     <em>*</em><input id="cname" name="name" size="25" class="required" minlength="2" />   </p>   <p>     <label for="cemail">E-Mail</label>     <em>*</em><input id="cemail" name="email" size="25"  class="required email" />   </p>   <p>     <label for="curl">URL</label>     <em>  </em><input id="curl" name="url" size="25"  class="url" value="" />   </p>   <p>     <label for="ccomment">Your comment</label>     <em>*</em><textarea id="ccomment" name="comment" cols="22"  class="required"></textarea>   </p>   <p>     <input class="submit" type="submit" value="Submit"/>   </p> </fieldset> </form></body></html>

总结，我们只要在加入如下的JAVASCRIPT代码，就可以把指定的FORM加上验证

Html代码

$(document).ready(function(){
$("#commentForm").validate();
});

 $(document).ready(function(){    $("#commentForm").validate();  });

不过我们还要在需要验证的INPUT里面class加入required说明是必填项，其他的就是验证相关数据比如email就是验证email的数据结构

以下列出validate自带的默认验证

required: "必选字段",

remote: "请修正该字段",

email: "请输入正确格式的电子邮件",

url: "请输入合法的网址",

date: "请输入合法的日期",

dateISO: "请输入合法的日期 (ISO).",

number: "请输入合法的数字",

digits: "只能输入整数",

creditcard: "请输入合法的信用卡号",

equalTo: "请再次输入相同的值",

accept: "请输入拥有合法后缀名的字符串",

maxlength: jQuery.format("请输入一个长度最多是 {0} 的字符串"),

minlength: jQuery.format("请输入一个长度最少是 {0} 的字符串"),

rangelength: jQuery.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),

range: jQuery.format("请输入一个介于 {0} 和 {1} 之间的值"),

max: jQuery.format("请输入一个最大为 {0} 的值"),

min: jQuery.format("请输入一个最小为 {0} 的值")

validate ()的可选项

debug：进行调试模式

$(".selector").validate({   debug: true})

把调试设置为默认

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

submitHandler：用其他方式替代默认的SUBMIT,比如用AJAX的方式提交

$(".selector").validate({   submitHandler: function(form) {$(form).ajaxSubmit();   }})

ignore：忽略某些元素不验证

$("#myform").validate({   ignore: ".ignore"})

rules：默认下根据form的classes, attributes, metadata判断，但也可以在validate函数里面声明 Key/value 可自定义规则. Key是对象的名字 value是对象的规则，可以组合使用 class/attribute/metadata rules.

以下代码特别验证selector类中name='name'是必填项并且 email是既是必填又要符合email的格式

$(".selector").validate({   rules: {     // simple rule, converted to {required:true}     name: "required",     // compound rule     email: {       required: true,       email: true     }   }})

messages：更改默认的提示信息

$(".selector").validate({ rules: { name: "required", email: { required: true, email: true } }, messages: { name: "Please specify your name", email: { required: "We need your email address to contact you", email: "Your email address must be in the format of name@domain.com" } } })

groups：定义一个组，把几个地方的出错信息同意放在一个地方，用errorPlacement控制把出错信息放在哪里

$("#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 })

onsubmit 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://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="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://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="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://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="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://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="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="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://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="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://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="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); } });

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 删除特殊属性并且返回他们

Custom selectors

Name Type Custom selectors:

Name Type :blank Returns: Array <Element > 没有值的筛选器 :filled Returns: Array <Element > 有值的筛选器 :unchecked Returns: Array <Element > 没选择的元素的筛选器

Utilities

Name Type String utilities:

Name Type jQuery.format( template, argument , argumentN... ) Returns: String 用参数代替模板中的 {n}。

Validator

validate方法返回一个Validator对象, 它有很多方法，让你能使用引发校验程序或者改变form的内容. validator对象有很多方法, 但下面只是列出常用的.

Name Type Validator methods:

Name Type form( ) Returns: Boolean 验证form返回成功还是失败 element( element ) Returns: Boolean 验证单个元素是成功还是失败 resetForm( ) Returns: undefined 把前面验证的FORM恢复到验证前原来的状态 showErrors( errors ) Returns: undefined 显示特定的错误信息

There are a few static methods on the validator object:

Name Type Validator functions:

Name Type setDefaults( defaults ) Returns: undefined 改变默认的设置 addMethod( name, method, message ) Returns: undefined 添加一个新的验证方法. 必须包括一个独一无二的名字，一个JAVASCRIPT的方法和一个默认的信息 addClassRules( name, rules ) Returns: undefined 增加组合验证类型在一个类里面用多种验证方法里比较有用 addClassRules( rules ) Returns: undefined 增加组合验证类型在一个类里面用多种验证方法里比较有用，这个是一下子加多个

[ edit ]

List of built-in Validation methods

A set of standard validation methods is provided:

Name Type Methods:

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 验证美式的电话号码

View Code

jQuery.validator.addMethod("mobile", function (value, element) {        var length = value.length;        var phone = /^0\d{2,4}-?\d{7,8}$/        //验证固定电话        var mobile = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;   //验证手机        return this.optional(element) || (length == 11 && phone.test(value) || (length == 11 && mobile.test(value)));    }, "电话或手机号码格式错误！");    jQuery.validator.addMethod("certCheck", function (value, element) {        var length = value.length;        if (length > 0) {            var certNo = /^(\d{6})(18|19|20)?(\d{2})([01]\d)([0123]\d)(\d{3})(\d|X|x)?$/;       //身份证号码            return this.optional(element) || (length == 18 && certNo.test(value));        }        else {            return true;        }    }, "身份证号码格式错误！");    $(function () {        $("#addForm").validate({            submitHandler: function (form) {                form.submit();            },            rules: {                ContactName: { required: true },                ContactIdno: { certCheck: true },                ContactTel: { required: true, mobile: true }            },            messages: {                ContactName: { required: "请输入联系人姓名！" },       ContactIdno: { certCheck: "请输入正确的身份证号码！" },                ContactTel: { required: "请输入联系电话！", mobile: "请输入正确的电话号码！" }            }        });    });