jQuery基础之表单验证

1、jquery基础之表单验证jquery基础之表单验证在用法jquery-validate.js插件时可以做一些初始化配置在初始化jquery-validate.js对象的时候，将外部的一些配置和该插件内部的一些默认配置合并在一起，假如有相同的配置，前者笼罩后者（默认）的配置/ constructor for validator$.validator = function( options, form ) this.settings = $.extend( true, , $.validator.defaults, options ); this.currentform = form; this

2、.init(); ;rules的格式标准格式是 key为字符串，value为对象字面挺直量rules : username: required: true, minlength: 2 也可以是key为字符串，value也为特定的字符串（required）ulus: username: "required" 在插件中会将上面格式调节为：required:true的形式。从下面代码可以看出对于usernname:minlength就不适用了，它会把它变成minlength:true这规章显然不合适/ converts a simple string to a s

3、tring: true rule, e.g., "required" to required:true normalizerule: function( data ) if ( typeof data = "string" ) var transformed = ; $.each( data.split( /s/ ), function() transformed this = true; ); data = transformed; return data; jquery-validate.js将这些规章解析后放到rul

4、es这个对象用以供校验时拜访插件大事监听处理在指定的元素上添加大事监听$( this.currentform ) .on( "focusin.validate focusout.validate keyup.validate", ":text, type=&39;password&39;, type=&39;file&39;, select, textarea, type=&39;number&39;, type=&39;search&39;, " + &am

5、p;quot;type=&39;tel&39;, type=&39;url&39;, type=&39;email&39;, type=&39;datetime&39;, type=&39;date&39;, type=&39;month&39;, " + "type=&39;week&39;, type=&39;time&39;, type=&39;datetime-local&39;, type=&39;

6、range&39;, type=&39;color&39;, " + "type=&39;radio&39;, type=&39;checkbox&39;, contenteditable, type=&39;button&39;", delegate ) / support: chrome, oldie / "select" is provided as event.target when clicking a option .on

7、( "click.validate", "select, option, type=&39;radio&39;, type=&39;checkbox&39;", delegate ) 上面的监听大事看起来很惊奇，用空格分隔，外加命名空间，假如不了解on的这些用法办法可以参考query.on() 函数详解。之前focusin，focusout，keyup都是标准大事，之前向来以为focusin与focusout是自定义的大事，这里需要注重一下。监听函数处理function delegate(

8、event ) / set form expando on contenteditable if ( !this.form && this.hasattribute( "contenteditable" ) ) this.form = $( this ).closest( "form" ) 0 ; var validator = $.data( this.form, "validator" ), eventtype = "on&q

9、uot; + event.type.replace( /validate/, "" ), settings = validator.settings; if ( settings eventtype && !$( this ).is( settings.ignore ) ) settings eventtype .call( validator, this, event ); 在插件中的settings放置了大事处理函数（settings eventtype .call( validator, this, event );，也

10、就是在defaults中定义的onfocusin，onfocusout，onkeyup，onclick，highlight，unhighlight大事，由于在defaults中所以可以在外部重写这些大事，做一些定制样式，这点会在最后重新封装一个适合自己的表单校验插件）自定义大事现在认真探索一下这些自定义大事在插件中是如何工作的先看一下jquery提供的一个trigger() 办法trigger() 办法触发被选元素的指定大事类型。格式：$(selector).trigger(event,param1,param2,)event 必须。规定指定元素要触发的大事。可以使自定义大事（用法 bind(

11、) 函数来附加），或者任何标准大事。param1,param2, 可选。传递到大事处理程序的额外参数。额外的参数对自定义大事特殊实用。注重到了trigger可以触发bind函数绑定的大事（bind现在用on取代），也就是说只要我在on中定义一些自定义的大事，都是可以通过trigger触发例子-trigger jquery-validation demo | bootstrap $(".listener").on("customizeevent otherevent",".validate,type=&am

12、p;39;text&39;",function() alert("complete some logical codes here"); ) $(".validate").trigger("customizeevent"); $("type=&39;text&39;").trigger("customizeevent"); $("type=&39;t

13、ext&39;").trigger("otherevent"); 上面的代码中on的第一个参数有两种大事，用法space隔开（这样两种大事都会绑定指定的大事处理函数），其次个参数指定了可以触发这个自定义大事的一些元素（满足挑选器type=’text’，validate的元素），第三个参数是指定用法trigger触发这些大事时执行的处理函数在接下来执行大事的触发，从代码中可以看到我挑选对两个元素触发了不同的大事。插件表单submit监听插件绑定了submit的监听大事（.validate为命名空

14、间），当我们通过$(form).submit() 或挺直点击type=submit(input , button可以指定type=submit)触发submit大事时，会执行绑定好的处理函数例子-绑定submitthis.on( "submit.validate", function( event )/ prevent submit for invalid forms or custom submit handlers if ( validator.cancelsubmit ) validator.cancelsubmit = false; return h

15、andle(); if ( validator.form() ) /校验表单胜利 if ( validator.pendingrequest ) validator.formsubmitted = true; return false; return handle(); else validator.focusinvalid(); return false; cancelsubmitcancelsubmit 是validator对象的成员属性，当满足挑选器：submit（input，button 的type为submit或者button没有指定类型多数扫瞄器会把button当做类型为 subm

16、it 的按钮）的按钮触发点击大事时，会查看这个按钮上是否包含class为cancel或者有formnovalidate=formnovalidate属性，假如按钮存在其中一种，那么就不会举行表单校验挺直提交form表单（设置validator.cancelsubmit=true）。validator.form()用法validator.form()举行表单元素校验，假如为true，推断validator.pendingrequest是否为true，假如是则不提交form，假如false则执行handle函数（handle执行的是submithandler（）的处理）submithandler插

17、件可以在外部配置submithandler处理函数，它的意思就是在form表单提交时可以做一些额外的处理，并通过返回true，false来打算表单是否提交。function handle() /提交表单 var hidden, result; if ( validator.settings.submithandler ) if ( validator.submitbutton ) / insert a hidden input as a replacement for the missing submit button hidden = $( "" ) .a

18、ttr( "name", validator.submitb ) .val( $( validator.submitbutton ).val() ) .appendto( validator.currentform ); result = validator.settings.submithandler.call( validator, validator.currentform, event ); if ( validator.submitbutton ) / and clean up afterwards; thanks to no-

19、block-scope, hidden can be referenced hidden.remove(); if ( result != undefined ) return result; return false; return true; 生成一个hidden的input躲藏域，在执行完submithandler以后移除，没能明了这里的意图。 执行submithandler后会有一个返回结果（true | false | undefined）,假如自定义的submithandler没有return返回则结果是undefined,这样导致handle（）结果为false，表单不会被提交插件表单校验的规章email/a-za-z0-9.!$%&&39;*+/=?_|-+a-za-z0-9(?:a-za-z0-9-0,61a-za-z0-9)?(?:.a-za-z0-9(?:a-za-z0-9-0,61a-za-z0-9)?)*$/1url/(?:(?:(?:https?|ftp):)?/)(?:s+(?:s*)?