开发学院网页设计 JavaScript 基于jQuery的表单验证插件：jValidate 阅读

基于jQuery的表单验证插件：jValidate

　2009-12-13 00:00:00　来源：WEB开发网　闂傚倸鍊搁崐鎼佸磹閹间礁纾瑰瀣椤愯姤鎱ㄥ鍡楀幊缂傚倹姘ㄩ幉绋款吋閸澀缃曢梻鍌欑濠€閬嶆惞鎼淬劌绐楅柡宥庡亞娑撳秵銇勯弽顐沪闁绘挶鍎甸弻锝夊即閻愭祴鍋撻崷顓涘亾濮樼偓瀚�

闂傚倸鍊搁崐鎼佸磹閹间礁纾瑰瀣捣閻棗銆掑锝呬壕濡ょ姷鍋涢ˇ鐢稿极閹剧粯鍋愰柟缁樺笧閳ь剦鍙冨鍝勑ч崶褏浠奸梺璇茬箲閼归箖鎮鹃悜钘夎摕闁靛濡囬崢鐢告⒑鐟欏嫷鍟忛柛鐘崇墵閵嗗倹绺介崨濠勫幈闁硅壈鎻槐鏇熺墡闂備線娼уú銈団偓姘嵆閻涱噣骞掑Δ鈧粻锝嗙節闂堟稑鏆欏ù婊堢畺閺岋綁濮€閳惰泛婀辨竟鏇熺節濮橆厾鍘甸梺缁樺姦閸撴岸鎮樻潏銊ょ箚闁圭粯甯炴晶娑氱磼缂佹ḿ娲寸€规洖宕灃闁告劕鍟犻崜婵堟崲濞戞ḿ鏆嗗┑鐘辫兌閺佹牜绱撴担浠嬪摵闁圭懓娲ら悾鐑藉箳閹搭厽鍍甸梺鐟板悁閻掞箓鎮楅幖浣光拻濞达絿鍎ら崵鈧梺鎼炲€栭悧鐘荤嵁韫囨稒鏅搁柨鐕傛嫹

婵犵數濮烽弫鍛婃叏閻戣棄鏋侀柛娑橈攻閸欏繑銇勯幘鍗炵仼缂佺媭鍨堕弻娑㈠箛闂堟稒鐏堥悗鐟版啞缁诲啴濡甸崟顖氱閻庨潧鎽滈悾濂告⒑绾拋娼愭繛鑼枎椤繒绱掑Ο鑲╂嚌闂侀€炲苯澧畝锝堝劵椤︽煡鎮￠妶澶嬬厪闁割偅绻冮崑顏呯箾瀹割喕绨婚幆鐔兼⒑鐎圭姵銆冮柤鍐茬埣瀹曟繈鏁冮埀顒勨€旈崘顔嘉ч柛鈩冾殘閻熸劙姊洪悡搴℃毐闁绘牕銈稿畷鐑樼節閸パ冨祮闂侀潧楠忕槐鏇㈠储椤忓牊鈷戦柟鑲╁仜閸旀鏌￠崨顔锯姇缂佸倹甯熼ˇ瀵哥磼鏉堛劌绗氭繛鐓庣箻閸┾剝鎷呴柨瀣垫綗闂傚倷娴囧銊╂倿閿曞倸绠查柛銉墮閺嬩線鏌熼崜褏甯涢柡鍛倐閺屻劑鎮ら崒娑橆伓闂傚倸鍊搁崐鎼佸磹閹间礁纾瑰瀣椤愯姤鎱ㄥ鍡楀幊缂傚倹姘ㄩ幉绋款吋閸澀缃曢梻鍌欑濠€閬嶆惞鎼淬劌绐楅柡宥庡亞娑撳秵銇勯弽顐沪闁绘挶鍎甸弻锝夊即閻愭祴鍋撻崷顓涘亾濮樼偓瀚�　　闂傚倸鍊搁崐鎼佸磹閹间礁纾归柣鎴ｅГ閸ゅ嫰鏌ら崫銉︽毄濞寸姵姘ㄧ槐鎾诲磼濞嗘帒鍘＄紓渚囧櫘閸ㄥ爼濡撮崘顔煎窛闁哄鍨归崢娲倵楠炲灝鍔氭い锔诲灦瀹曪繝骞庨懞銉у帾闂婎偄娲﹀ú鏍ㄧ墡闂備浇顕х€垫帡宕滈悢濂夋綎闁惧繐婀辩壕鍏间繆椤栨碍鎯堟い顐㈢焸濮婃椽宕烽娑欏珱闂佺ǹ顑呭Λ婵嬪箚閳ь剚銇勮箛鎾寸ォ婵☆垰瀚板娲传閸曨剚鎷卞┑鐐插级宀ｅ潡骞戦姀鐘斀濠电姴瀚弶鎼佹⒑閸濆嫭宸濆┑顔惧厴閹即濡烽埡鍌楁嫽婵炶揪绲介幖顐ゆ暜鐠轰警鐔嗛柣鐔峰簻閺€鑽ょ磼閸屾氨孝妤楊亙鍗冲畷鐓庮潩閿濆懍澹曢梺鍝勫暙閻楀棛绮堥崘鈹夸簻闊洤娴烽ˇ锕€霉濠婂牏鐣洪柡灞诲妼閳规垿宕卞☉鎵佸亾濡も偓椤儻顧侀柛鐘崇墵濠€渚€姊虹紒妯曟垿鎮烽妷褉鍋撳鐓庢灓缂侇喚绮妶锝夊礃閳哄啫骞堟俊鐐€栭崝鎴﹀磹閺囥垹鍑犻幖娣妽閻撶喖鐓崶褜鍎忛柛鏃€绮撻弻鏇㈠炊瑜嶉顓犫偓娈垮枟濞兼瑨鐏掗梺鍛婄箓鐎氼剝顤傛繝纰夌磿閸嬫垿宕愰幋锕€鍨傛繛宸簼閸嬶繝鏌嶉崫鍕櫣缂佺姵鐗犻弻宥夊煛娴ｅ憡娈查梺绋挎捣閸犳牠寮婚弴銏犵倞鐟滃秶鑺辨繝姘厵闁告垯鍊栫€氾拷

核心提示：网上基于jQuery的表单验证插件已有很多，但是这个轮子我还是继续做一个，基于jQuery的表单验证插件：jValidate，因为这个表单验证插件是从我以前的个人JS框架移值过来的（我已慢慢投入jQuery的怀抱），并且它的验证规则书写方式也许会让你眼前一亮，如果未定义则采用默认行为，函数原型：function(ite

网上基于jQuery的表单验证插件已有很多，但是这个轮子我还是继续做一个，因为这个表单验证插件是从我以前的个人JS框架移值过来的（我已慢慢投入jQuery的怀抱），并且它的验证规则书写方式也许会让你眼前一亮。

网上的各类表单验证插件的验证规则都是写在脚本里的，但我的插件的验证规则却是写在表单元素的属性里的。如下面的例子：

<input　name="name"　type="text"　id="name"　size="30"　jvpattern="^.+$"　jverrortip="请输入正确的姓名."　jvtipid="spt_name"　jvmethod="checkname"　/> <span　id="spt_name"　class="normaltips"　jverrorclass="errortips"　jvcorrectclass="correcttips"></span>

注意看上面代码中以“jv“开头的各种属性名，这些都是表单验证插件需要用的属性值。其中各属性代表的意思请阅读以下表：

1、form表格控件元素可使用的属性：

属性名	说明
jvpattern	用来验证控件值是否正确的正则表达式。（可不定义此属性)
jvcompareid	需要与当前控件进行值相等比较的其它控件id。（可不定义此属性)
jvrequired	表明当前控件值是否是必须的，也即是否允许当前控件值为空。如不定义此属性则默认为不可空，如果值为false或0则允许为空。（可不定义此属性)
jvmethod	定义需要进行额外验证的方法。（可不定义此属性) 此属性值如果定义，则不需要输写“括号”，并且函数原型为： `xx　function(item){ 　　　　//代码　　　　　　　　//true表示验证成功，false表示验证失败。　　　　return　true/false; 　　　　//或者带错误消息的返回　　　　return　{result:true/false,　message:'错误消息'}; }` 其中item参数是当前控件对象的jQuery实例。
jvtipid	显示验证提示信息的控件id。（可不定义此属性) 注：如果不定义此属性，并且未定义onerror或oncorrect函数则默认为alert提示
jverrortip	当验证失败时要显示的提示信息。（可不定义此属性)
jvcorrecttip	当验证成功时要显示的提示信息。（可不定义此属性)
jvfocuson	当验证失败后是否需要将光标移到控件上。（可不定义此属性)

控件上必须定义：jvpattern、jvmethod、jvcompareid 三者之中的一个或多个，否则插件将不对对应的控件进行验证。

2、tip提示控件元素可使用的属性：tip提示控件即是某个表单控件jvtipid指定的控件。

属性名	说明
jvnormalclass	正常情况下显示提示信息时采用的css样式的classname。（可不定义此属性)
jvcorrectclass	验证成功后显示提示信息时采用的css样式的classname。（可不定义此属性)
jverrorclass	验证失败后显示提示信息时采用的css样式的classname。（可不定义此属性)

当控件规则设置好后就可以直接激活调用jValidate，以便当表单进行submit提交前，进行验证检查。

示例：　

$('form').jValidate();

或者带参数的调用：　

$('form').jValidate({ 　blurvalidate　:　true, 　isbubble　:　false, 　onerror　:　function(item,form){ 　　$.jMessageBox.show('错误',　item.attr('jverrortip')); 　} });

可设置的参数请阅读下表：

参数名	说明
isbubble	是否允许“冒泡”，也即是否允许逐个检查各控件值，如果值为true，则会逐一检查验证所有已设置验证规则的控件；如果值为false则当有一个控件值验证失败（不符合条件）后，将退出后续控件的检查。默认值为false 注：如果提示信息是以弹出窗口方式显示的，建议将此值设置为false，以免一下子弹出较多提示，引起用户反感。
blurvalidate	设置当个个控件失去焦点后是否需要即时检查验证。默认值为false。
emptytip	是否允许空提示。也即是当没有提示信息可显示时，是否还允许提示控件改变css类。默认值为false
oncorrect	当控件值验证成功时调用处理的方法，如果未定义则采用默认行为。函数原型： `function(item,　form){ 　　　//代码 }` 其中参数item: 表示当前控件的jQuery实例; form : 表示控件所在的表单实例
onerror	当控件值验证失败时调用处理的方法，如果未定义则采用默认行为。函数原型： `function(item,　form){ 　　　//代码 }` 其中参数item: 表示当前控件的jQuery实例; form : 表示控件所在的表单实例