您好,欢迎访问三七文档
(一)、可选项(options).....................................................................................................................................................................................1(二)插件方法(jQueryvalidation)..................................................................................................................................................................6(三、四)选择器及实用工具(jQueryvalidation)..........................................................................................................................................7四、实用工具(Utilities)................................................................................................................................................................................8(五)验证器(jQueryvalidation)......................................................................................................................................................................8(六)内置验证方法(jQueryvalidation)........................................................................................................................................................10(七)注意事项(jQueryvalidation)................................................................................................................................................................16(八)应用实例(jQueryvalidation)................................................................................................................................................................17jQuery验证框架代码scripttype=text/javascriptsrc=js/jquery-min.js/scriptscripttype=text/javascriptsrc=js/jquery.validate.pack.js/scriptscripttype=text/javascript$(document).ready(function(){$(#textForm).validate();});/scriptformclass=cmxformid=commentFormmethod=getaction=Nameinputid=cnamename=namesize=25class=requiredminlength=2/inputclass=submittype=submitvalue=Submit//form此文谨以以上js片段开始介绍jQueryValidation。验证从这个方法开始:validate([options])(一)、可选项(options)[1]debug类型:Boolean默认:false说明:开启调试模式。如果为true,表单不会提交,而且会在控制台显示一些错误消息(需要Firebug或者Firebuglite)。当要阻止表单默认提交事件,尝试去开启它。$(.selector).validate({debug:true})[2]submitHandler类型:Callback默认:default(native)formsubmit说明:当表单通过验证,提交表单。回调函数有个默认参数form$(.selector).validate({submitHandler:function(form){//dootherstuffforavalidformform.submit();}})[3]invalidHandler类型:Callback说明:当未通过验证的表单提交时,可以在该回调函数中处理一些事情。该回调函数有两个参数:第一个为一个事件对象,第二个为验证器(validator)$(.selector).validate({invalidHandler:function(form,validator){varerrors=validator.numberOfInvalids();if(errors){varmessage=errors==1?'Youmissed1field.Ithasbeenhighlighted':'Youmissed'+errors+'fields.Theyhavebeenhighlighted';$(div.errorspan).html(message);$(div.error).show();}else{$(div.error).hide();}}})[4]ignore类型:Seletor说明:当进行表单验证时,过滤掉选择器所选择的表单。用了jQuerynot方法(not())。类型为submit和reset的表单总是被忽略的。$(#myform).validate({ignore:.ignore})[5]rules类型:Options默认:rulesarereadfrommarkup(classes,attributes,metadata)说明:用户定义的键/值对规则。键为一个表单元素的name属性(或是一组单选/复选按钮)、值为一个简单的字符串或者由规则/参数对(rule/parameter)组成的一个对象。可以和class/attribute/metadata规则一起使用。每个规则可以指定一个依存的验证前提条件。$(.selector).validate({rules:{//simplerule,convertedto{required:true}name:required,//compoundruleemail:{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:Pleasespecifyyourname,email:{required:Weneedyouremailaddresstocontactyou,email:Youremailaddressmustbeintheformatofname@domain.com}}})[7]groups类型:Options说明:指定错误消息分组。一个组由一个任意的组名作为键,一个由空白符分割的表单元素name属性列表作为值。用errorPlacement定义组消息的存放位置。Js代码1.$(#myform).validate({2.groups:{3.username:fnamelname4.},5.errorPlacement:function(error,element){6.if(element.attr(name)==fname7.||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})inputtype=textname=emailclass={validate:{required:true,email:true}}/[14]errorClass类型:String默认:error说明:用此设定的样式来定义错误消息的样式。$(.selector).val
本文标题:jquery.validate Validation .js验证框架 帮助 手册 文档
链接地址:https://www.777doc.com/doc-5503150 .html