jQuery验证框架

（一）、可选项( options ) (1)（二）插件方法(jQuery validation) (7)（三、四）选择器及实用工具(jQuery validation) (8)四、实用工具(Utilities) (8)（五）验证器(jQuery validation) (9)（六）内置验证方法(jQuery validation) (11)（七）注意事项(jQuery validation) (17)（八）应用实例(jQuery validation) (18)jQuery验证框架应用/blog/556633Html代码<script type="text/javascript"src="js/jquery-min.js"></script><script type="text/javascript"src="js/jquery.validate.pack.js"></script><script type="text/javascript">$(document).ready(function() {$("#textForm").validate();});</script><form class="cmxform"id="commentForm"method="get"action="">Name<input id="cname"name="name"size="25"class="required"minlength="2"/><input class="submit"type="submit"value="Submit"/></form>此文谨以以上js片段开始介绍jQuery Validation。

验证从这个方法开始：validate( [options] )（一）、可选项( options )[1] debug类型：Boolean默认：false说明：开启调试模式。

如果为true，表单不会提交，而且会在控制台显示一些错误消息（需要Firebug或者Firebug lite）。

当要阻止表单默认提交事件，尝试去开启它。

$(".selector").validate({debug: true})[2] submitHandler类型：Callback默认：default (native) form submit说明：当表单通过验证，提交表单。

回调函数有个默认参数form$(".selector").validate({submitHandler: function(form) {// do other stuff for a valid formform.submit();}})[3] invalidHandler类型：Callback说明：当未通过验证的表单提交时，可以在该回调函数中处理一些事情。

该回调函数有两个参数：第一个为一个事件对象，第二个为验证器（validator）$(".selector").validate({invalidHandler: function(form, validator) {var errors = validator.numberOfInvalids();if (errors) {var message = errors == 1? 'You missed 1 field. It has been highlighted': 'You missed ' + errors + ' fields. They have been highlighted';$("div.error span").html(message);$("div.error").show();} else {$("div.error").hide();}}})[4] ignore类型：Seletor说明：当进行表单验证时，过滤掉选择器所选择的表单。

用了jQuery not方法（ not() ）。

类型为submit 和reset的表单总是被忽略的。

$("#myform").validate({ignore: ".ignore"})[5] rules类型：Options默认：rules are read from markup (classes, attributes, metadata)说明：用户定义的键/值对规则。

键为一个表单元素的name属性（或是一组单选/复选按钮）、值为一个简单的字符串或者由规则/参数对（rule/parameter）组成的一个对象。

可以和 class/attribute/metadata 规则一起使用。

每个规则可以指定一个依存的验证前提条件。

$(".selector").validate({rules: {// simple rule, converted to {required:true}name: "required",// compound ruleemail: {required: true,email: true}/*email: {depends: function(element) {return $("#contactform_email:checked")}}*/}})[6] messages类型：Options默认：验证方法默认使用的消息说明：用户自定义的键/值对消息。

键为一个表单元素的name属性，值为该表单元素将要显示的消息。

该消息覆盖元素的title属性或者默认消息。

消息可以是一个字符串或者一个回调函数。

回调函数必须在验证器的作用域中调用，将规则参数作为回调函数的第一个参数，将该表单元素作为回调函数的第二个参数，且必须返回一个字符串类型的消息。

$(".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@"}}})[7] groups类型：Options说明：指定错误消息分组。

一个组由一个任意的组名作为键，一个由空白符分割的表单元素name属性列表作为值。

用errorPlacement定义组消息的存放位置。

Js代码1.$("#myform").validate({2. groups: {3. username: "fname lname"4. },5. errorPlacement: function(error, element) {6. if (element.attr("name") == "fname"7. || element.attr("name") == "lname" )8. error.insertAfter("#lastname");9. else10. error.insertAfter(element);11. },12. debug:true13. })[8] onsubmit类型：Boolean默认：true说明：提交时验证表单。

当设置为false时，只能用其它的事件验证。

Js代码1.$(".selector").validate({2. onsubmit: false3.})[9] onfocusout类型：Boolean默认：true说明：焦点离开时验证（单选/复选按钮除外）。

如果表单中没有输入任何内容，所有的规则将被跳过，除非该表单已经被标记为无效的。

Js代码$(".selector").validate({onfocusout: false})[10] onkeyup类型：Boolean默认：true说明：当键盘按键弹起时验证。

只要表单元素没有被标记成无效的，不会有反应。

另外，所有的规则将在每次按键弹起时验证。

$(".selector").validate({onkeyup: false})[11] onclick类型：Boolean默认：true说明：鼠标点击验证针对单选和复选按钮。

$(".selector").validate({onclick: false})[12] focusInvalid类型：Boolean默认：true说明：当验证无效时，焦点跳到第一个无效的表单元素。

当为false时，验证无效时，没有焦点响应。

$(".selector").validate({focusInvalid: false})[12] focusCleanup类型：Boolean默认：false说明：如果为true，当表单得到焦点时，移除在该表单上的errorClass并隐藏所有错误消息。

避免与focusInvalid一起使用。

$(".selector").validate({focusCleanup: true})[13] meta类型：String说明：如果想使用其它插件来使用元数据验证规则，得指定相应的元数据对象。

$("#myform").validate({meta: "validate"})<input type="text" name="email" class="{validate:{ required: true, email:true}}" />[14] errorClass类型：String默认："error"说明：用此设定的样式来定义错误消息的样式。