<textarea cols="50" rows="15" name="code" class="xhtml:collapse:firstline[1]"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>jQuery formValidator表單驗證插件 -- by:貓冬，email:[email protected]</title> <meta name="Author" content="貓冬"> <meta name="description" content="jQuery formValidator表單驗證插件" /> <meta name="keywords" content="jQuery,formValidator,插件,表單,驗證,插件,javascript,表單驗證,提示層" /> <mce:script src="jquery_last.js" mce_src="jquery_last.js" type="text/javascript"></mce:script> <link type="text/css" rel="stylesheet" href="style/validator.css" mce_href="style/validator.css"></link> <mce:script src="formValidator.js" mce_src="formValidator.js" type="text/javascript" charset="UTF-8"></mce:script> <mce:script src="formValidatorRegex.js" mce_src="formValidatorRegex.js" type="text/javascript" charset="UTF-8"></mce:script> <mce:script language="javascript" src="DateTimeMask.js" mce_src="DateTimeMask.js" type="text/javascript"></mce:script> <mce:script type="text/javascript"><!-- $(document).ready(function(){ //$.formValidator.initConfig({onerror:function(){alert("校驗沒有通過，具體錯誤請看錯誤提示")}}); $.formValidator.initConfig({formid:"form1",onerror:function(msg){alert(msg)},onsuccess:function(){alert('ddd');return false;}}); $("#test1").formValidator({onshow:"請輸入用戶名,只有輸入/"maodong/"纔是對的",onfocus:"用戶名至少6個字符,最多10個字符",oncorrect:"該用戶名可以註冊"}).inputValidator({min:6,max:10,onerror:"你輸入的用戶名非法,請確認"}).regexValidator({regexp:"username",datatype:"enum",onerror:"用戶名格式不正確"}) .ajaxValidator({ type : "get", url : "Default.aspx", datatype : "json", success : function(data){ if( data == "1" ) { return true; } else { return false; } }, buttons: $("#button"), error: function(){alert("服務器沒有返回數據，可能服務器忙，請重試");}, onerror : "該用戶名不可用，請更換用戶名", onwait : "正在對用戶名進行合法性校驗，請稍候..." }); $("#password1").formValidator({onshow:"請輸入密碼",onfocus:"密碼不能爲空",oncorrect:"密碼合法"}).inputValidator({min:1,empty:{leftempty:false,rightempty:false,emptyerror:"密碼兩邊不能有空符號"},onerror:"密碼不能爲空,請確認"}); $("#password2").formValidator({onshow:"請輸入重複密碼",onfocus:"兩次密碼必須一致哦",oncorrect:"密碼一致"}).inputValidator({min:1,empty:{leftempty:false,rightempty:false,emptyerror:"重複密碼兩邊不能有空符號"},onerror:"重複密碼不能爲空,請確認"}).compareValidator({desid:"password1",operateor:"=",onerror:"2次密碼不一致,請確認"}); $(":radio[name='sex']").formValidator({tipid:"sexTip",onshow:"請選擇你的性別",onfocus:"沒有第三種性別了，你選一個吧",oncorrect:"輸入正確",defaultvalue:["1"]}).inputValidator({min:1,max:1,onerror:"性別忘記選了,請確認"});//.defaultPassed(); $("#nl").formValidator({onshow:"請輸入的年齡（1-99歲之間）",onfocus:"只能輸入1-99之間的數字哦",oncorrect:"恭喜你,你輸對了"}).inputValidator({min:1,max:99,type:"value",onerrormin:"你輸入的值必須大於等於1",onerror:"年齡必須在1-99之間，請確認(輸入正確後才能離開焦點)"});//.defaultPassed(); $("#csny").focus(function(){WdatePicker({skin:'whyGreen',oncleared:function(){$(this).blur();},onpicked:function(){$(this).blur();}})}).formValidator({onshow:"請輸入的出生日期",onfocus:"請輸入的出生日期，不能全部是0哦",oncorrect:"你輸入的日期合法"}).inputValidator({min:"1900-01-01",max:"2000-01-01",type:"date",onerror:"日期必須在/"1900-01-01/"和/"2000-01-01/"之間"});//.defaultPassed(); $("#sfzh").formValidator({onshow:"請輸入15或18位的身份證",onfocus:"輸入15或18位的身份證",oncorrect:"輸入正確"}).functionValidator({fun:isCardID}); $("#email").formValidator({onshow:"請輸入郵箱",onfocus:"郵箱6-100個字符,輸入正確了才能離開焦點",oncorrect:"恭喜你,你輸對了",defaultvalue:"@",forcevalid:true}).inputValidator({min:6,max:100,onerror:"你輸入的郵箱長度非法,請確認"}).regexValidator({regexp:"^([//w-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([//w-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$",onerror:"你輸入的郵箱格式不正確"}); $("#xueli").formValidator({onshow:"請選擇你的學歷",onfocus:"學歷必須選擇",oncorrect:"謝謝你的配合",defaultvalue:"a"}).inputValidator({min:1,onerror: "你是不是忘記選擇學歷了!"}).defaultPassed(); $("#ewjy").formValidator({onshow:"無論你輸入什麼都會提示你額外校驗出錯",onfocus:"如果你輸入/"貓冬/"，額外校驗就會成功",oncorrect:"額外校驗成功"}).inputValidator({min:1,onerror:"這裏至少要一個字符,請確認"}).functionValidator({ fun:function(val,elem){ if(val=="貓冬"){ return true; }else{ return "額外校驗失敗,想額外校驗通過，請輸入/"貓冬/"" } } }); $("#Tel_country").formValidator({tipid:"teltip",onshow:"請輸入國家區號",onfocus:"國家區號2位數字",oncorrect:"恭喜你,你輸對了",defaultvalue:"86"}).regexValidator({regexp:"^//d{2}$",onerror:"國家區號不正確"}); $("#Tel_area").formValidator({tipid:"teltip",onshow:"請輸入地區區號",onfocus:"地區區號3位或4位數字",oncorrect:"恭喜你,你輸對了"}).regexValidator({regexp:"^//d{3,4}$",onerror:"地區區號不正確"}); $("#Tel_number").formValidator({tipid:"teltip",onshow:"請輸入電話號碼",onfocus:"電話號碼7到8位數字",oncorrect:"恭喜你,你輸對了"}).regexValidator({regexp:"^//d{7,8}$",onerror:"電話號碼不正確"}); $("#Tel_ext").formValidator({tipid:"teltip",onshow:"請輸入分機號碼",onfocus:"分機號碼1到5位數字",oncorrect:"恭喜你,你輸對了"}).regexValidator({regexp:"^//d{1,5}$",onerror:"分機號碼不正確"}); $(":checkbox[name='checkbox1']").formValidator({tipid:"test3Tip",onshow:"請選擇你的興趣愛好（至少選一個）",onfocus:"你至少選擇1個",oncorrect:"恭喜你,你選對了"}).inputValidator({min:1,onerror:"你選的個數不對"}); $(":checkbox[name='checkbox8']").formValidator({tipid:"test2Tip",onshow:"請選擇你的興趣愛好(至少選擇2個,最多選擇3個)",onfocus:"你至少選擇2個,最多選擇3個",oncorrect:"恭喜你,你選對了",defaultvalue:["7","8"]}).inputValidator({min:2,max:3,onerror:"你選的個數不對(至少選擇2個,最多選擇3個)"}); $(":radio[name='radio']").formValidator({tipid:"aiguoTip",onshow:"愛國的人一定要選哦",onfocus:"你得認真思考哦",oncorrect:"不知道你愛不愛，反正你是選了",defaultvalue:["4"]}).inputValidator({min:1,max:1,onerror:"難道你不愛國？你給我選！！！！"}).defaultPassed(); $("#shouji").formValidator({empty:true,onshow:"請輸入你的手機號碼，可以爲空哦",onfocus:"你要是輸入了，必須輸入正確",oncorrect:"謝謝你的合作",onempty:"你真的不想留手機號碼啊？"}).inputValidator({min:11,max:11,onerror:"手機號碼必須是11位的,請確認"}).regexValidator({regexp:"mobile",datatype:"enum",onerror:"你輸入的手機號碼格式不正確"});; $("#lxdh").formValidator({empty:true,onshow:"請輸入你的聯繫電話，可以爲空哦",onfocus:"格式例如：0577-88888888",oncorrect:"謝謝你的合作",onempty:"你真的不想留聯繫電話了嗎？"}).regexValidator({regexp:"^[[0-9]{3}-|/[0-9]{4}-]?([0-9]{8}|[0-9]{7})?$",onerror:"你輸入的聯繫電話格式不正確"}); $("#selectmore").formValidator({onshow:"按住CTRL可以多選",onfocus:"按住CTRL可以多選,至少選擇2個",oncorrect:"謝謝你的合作",defaultvalue:["0","1","2"]}).inputValidator({min:2,onerror:"至少選擇2個"}); $("#ms").formValidator({onshow:"請輸入你的描述",onfocus:"描述至少要輸入10個漢字或20個字符",oncorrect:"恭喜你,你輸對了",defaultvalue:"這傢伙很懶，什麼都沒有留下。"}).inputValidator({min:20,onerror:"你輸入的描述長度不正確,請確認"}); }); function test(obj) { if(obj.value=="不校驗身份證") { $("#sfzh").attr("disabled",true).unFormValidator(true); obj.value = "校驗身份證"; } else { $("#sfzh").attr("disabled",false).unFormValidator(false); obj.value = "不校驗身份證"; } } function test1(obj) { if(obj.value=="全角字符當做1個長度") { $.formValidator.getInitConfig("1").wideword = false; obj.value = "全角字符當做2個長度"; } else { $.formValidator.getInitConfig("1").wideword = true; obj.value = "全角字符當做1個長度"; } } // --></mce:script> <mce:style type="text/css" media="all"><!-- body,div{font-size:12px;} --></mce:style><style type="text/css" media="all" mce_bogus="1">body,div{font-size:12px;}</style> </head> <body> <h3>jQuery formValidator表單驗證插件示例</h3> <p>只有一個校驗組的示例</p> <p><a href="http://wzmaodong.cnblogs.com" mce_href="http://wzmaodong.cnblogs.com">貓冬的博客</a></p> <input type="button" onClick="test(this)" value="不校驗身份證" /> <label> <input type="button" name="Submit" onClick="test1(this)" value="全角字符當做1個長度">請看最後的"你的描述"控件 </label> <form action="" method="post" name="form1" id="form1"> <table border="0px" style="font-size:12px" mce_style="font-size:12px" width="630px"> <tr> <td align="right">用戶名:</td> <td><input type="text" id="test1" style="width:120px" value="maodong" /></td> <td><div id="test1Tip" style="width:250px"></div></td> </tr> <tr> <td align="right">密碼:</td> <td><input type="password" id="password1" style="width:120px" /></td> <td><div id="password1Tip" style="width:250px"></div></td> </tr> <tr> <td align="right">重複密碼:</td> <td><input type="password" id="password2" style="width:120px" /></td> <td><div id="password2Tip" style="width:250px"></div></td> </tr> <tr> <td align="right">你的性別:</td> <td><input type="radio" id="sex" value="1" name="sex" /> 男 <input type="radio" id="sex1" value="2" name="sex" /> 女</td> <td><div id="sexTip" style="width:250px"></div></td> </tr> <tr> <td align="right">你的年齡:</td> <td><input type="text" id="nl" style="width:120px" value="26" class="fv_input_text_default" /></td> <td><div id="nlTip" style="width:250px"></div></td> </tr> <tr> <td align="right">出生日期:</td> <td><input type="text" id="csny" style="width:120px" value="1982-09-21" /></td> <td><div id="csnyTip" style="width:300px"></div></td> </tr> <tr> <td align="right">身份證號</td> <td><input name="text2" type="text" id="sfzh" style="width:150px" value="" /></td> <td><div id="sfzhTip" style="width:250px"></div></td> </tr> <tr> <td align="right">電子郵箱:</td> <td><input type="text" id="email" style="width:120px" /></td> <td><div id="emailTip" style="width:250px"></div></td> </tr> <tr> <td align="right">你的學歷:</td> <td> <select name="select1" id="xueli"> <option value="">－－請選擇你的學歷－－</option> <option value="a">專科</option> <option value="b">本科</option> <option value="c">研究生</option> <option value="e">碩士</option> <option value="d">博士</option> </select> </td> <td><div id="xueliTip" style="width:250px"></div></td> </tr> <tr> <td align="right">額外校驗:</td> <td><input name="text" type="text" id="ewjy" style="width:120px" /></td> <td><div id="ewjyTip" style="width:270px"></div></td> </tr> <tr> <td colspan="3"> 國家區號 <input id="Tel_country" style="width: 20px;" value="" /> -地區區號 <input id="Tel_area" style="width: 35px;" /> -電話號碼 <input id="Tel_number" style="width: 60px;" /> -分機號碼 <input id="Tel_ext" style="width: 30px;" /> </td> </tr> <tr> <td colspan="3"><div id="teltip" style="width:250px"></div></td> </tr> <tr> <td align="right">興趣愛好1:</td> <td colspan="2"> <input type="checkbox" name="checkbox1" id="qq1"/> 乒乓球 <input type="checkbox" name="checkbox1" id="qq2" value="1" /> 羽毛球 <input type="checkbox" name="checkbox1" id="qq3" value="2" /> 上網 <input type="checkbox" name="checkbox1" id="qq4" value="3" /> 旅遊 <input type="checkbox" name="checkbox1" id="qq5" value="4" /> 購物 </td> </tr> <tr> <td colspan="3"><div id="test3Tip" style="width:350px"></div></td> </tr> <tr> <td align="right">興趣愛好2:</td> <td colspan="2"> <input type="checkbox" name="checkbox8" id="pp0"/> 乒乓球 <input type="checkbox" name="checkbox8" id="pp1" value="5" /> 羽毛球 <input type="checkbox" name="checkbox8" id="pp7" value="6" /> 上網 <input type="checkbox" name="checkbox8" id="pp8" value="7" /> 旅遊 <input type="checkbox" name="checkbox8" id="pp9" value="8" /> 購物 <input type="checkbox" name="checkbox8" id="pp6" value="9" /> 睡覺 </td> </tr> <tr> <td colspan="3"><div id="test2Tip" style="width:350px"></div></td> </tr> <tr> <td align="right">你愛國嗎:</td> <td colspan="2"> <input type="radio" name="radio" value="1" id="bb1" /> 不愛 <input type="radio" name="radio" id="bb2" value="2" /> 不發表意見 <input type="radio" name="radio" id="nn3" value="3" /> 愛 <input type="radio" name="radio" id="nn4" value="4" /> 愛死它了 </td> </tr> <tr> <td colspan="3"><div id="aiguoTip" style="width:250px"></div></td> </tr> <tr> <td align="right">手機號碼:</td> <td><input type="text" id="shouji" style="width:120px" /></td> <td><div id="shoujiTip" style="width:250px"></div></td> </tr> <tr> <td align="right">聯繫電話:</td> <td><input type="text" id="lxdh" style="width:120px" /></td> <td><div id="lxdhTip" style="width:250px"></div></td> </tr> <tr> <td align="right" valign="top">多選select控件:</td> <td valign="top"> <select name="select" size="3" id="selectmore" multiple> <option value="0">多選1</option> <option value="1">多選2</option> <option value="2">多選3</option> </select>(按住ctrl鍵多選) </td> <td><div id="selectmoreTip" style="width:250px"></div></td> </tr> <tr> <td align="right" valign="top">你的描述:</td> <td colspan="2" valign="top"> <textarea id="ms" cols="50" rows="10">這裏是十個中文字符哦</textarea>
