<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,表單驗證,提示層" />
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="style/validator.css"></link>
<script src="formValidator_min.js" type="text/javascript" charset="UTF-8"></script>
<script src="formValidatorRegex.js" type="text/javascript" charset="UTF-8"></script>
<script language="javascript" src="DateTimeMask.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$.formValidator.initConfig({formid:"form1",debug:false,submitonce:true,
onerror:function(msg,obj,errorlist){
//$.map(errorlist,function(msg1){alert(msg1)});
alert(msg);
}
});
$("#us").formValidator({onshow:"請輸入用戶名,只有輸入\"maodong\"纔是對的",onfocus:"用戶名至少5個字符,最多10個字符",oncorrect:"該用戶名可以註冊"}).inputValidator({min:5,max:10,onerror:"你輸入的用戶名非法,請確認"}).regexValidator({regexp:"username",datatype:"enum",onerror:"用戶名格式不正確"})
.ajaxValidator({
datatype : "html",
async : true,
url : "http://www.51gh.net/chkuser.aspx?act=ok",
success : function(data){
if( data.indexOf("此用戶名可以註冊!") > 0 ) return true;
if( data.indexOf("此用戶名已存在,請填寫其它用戶名!") > 0 ) return false;
return false;
},
buttons: $("#button"),
error: function(XMLHttpRequest, textStatus, errorThrown){alert("服務器沒有返回數據，可能服務器忙，請重試"+errorThrown);},
onerror : "該用戶名不可用，請更換用戶名",
onwait : "正在對用戶名進行合法性校驗，請稍候..."
}).defaultPassed();;
$("#password1").formValidator({onshow:"請輸入密碼",onfocus:"至少1個長度",oncorrect:"密碼合法"}).inputValidator({min:1,empty:{leftempty:false,rightempty:false,emptyerror:"密碼兩邊不能有空符號"},onerror:"密碼不能爲空,請確認"});
$("#password2").formValidator({onshow:"輸再次輸入密碼",onfocus:"至少1個長度",oncorrect:"密碼一致"}).inputValidator({min:1,empty:{leftempty:false,rightempty:false,emptyerror:"重複密碼兩邊不能有空符號"},onerror:"重複密碼不能爲空,請確認"}).compareValidator({desid:"password1",operateor:"=",onerror:"2次密碼不一致,請確認"});
$(":radio[name='xb_one']").formValidator({tipid:"sexTip",onshow:"請選擇你的性別",onfocus:"沒有第三種性別了，你選一個吧",oncorrect:"輸入正確",defaultvalue:["1"]}).inputValidator({min:1,max:1,onerror:"性別忘記選了,請確認"});//.defaultPassed();
$("#nl").formValidator({automodify:true,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:"@"}).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='xqah_one']").formValidator({tipid:"test3Tip",onshow:"請選擇你的興趣愛好（至少選一個）",onfocus:"你至少選擇1個",oncorrect:"恭喜你,你選對了"}).inputValidator({min:1,onerror:"你選的個數不對"});
$(":checkbox[name='xqah_more']").formValidator({tipid:"test2Tip",onshow:"請選擇你的興趣愛好(至少選擇2個,最多選擇3個)",onfocus:"你至少選擇2個,最多選擇3個",oncorrect:"恭喜你,你選對了",defaultvalue:["7","8"]}).inputValidator({min:2,max:3,onerror:"你選的個數不對(至少選擇2個,最多選擇3個)"});
$(":radio[name='aiguo']").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\\+]\\d{2,3}-)?(0\\d{2,3})-)?(\\d{7,8})(-(\\d{3,}))?$",onerror:"你輸入的聯繫電話格式不正確"});
$("#sjdh").formValidator({empty:true,onshow:"請輸入你的手機或電話，可以爲空哦",onfocus:"格式例如：0577-88888888或11位手機號碼",oncorrect:"謝謝你的合作",onempty:"你真的不想留手機或電話了嗎？"}).regexValidator({regexp:["tel","mobile"],datatype:"enum",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個長度";
}
}
</script>
<style type="text/css" media="all">
body,div{font-size:12px;}
</style>
</head>
<body>
<h3>jQuery formValidator表單驗證插件示例</h3>
<p>只有一個校驗組的示例</p>
<p><a 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">
<input type="submit" name="button" id="button" value="提交" />
<br />
<table border="0px" style="font-size:12px" width="630px">
<tr>
<td align="right">用戶名:</td>
<td><input type="text" id="us" name="us" style="width:120px" value="maodong" /></td>
<td><div id="usTip" style="width:250px"></div></td>
</tr>
<tr>
<td align="right">密碼:</td>
<td><input type="password" id="password1" name="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" name="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="xb_one" />
男 <input type="radio" id="sex1" value="2" name="xb_one" />
女</td>
<td><div id="sexTip" style="width:250px"></div></td>
</tr>
<tr>
<td align="right">你的年齡:</td>
<td><input type="text" id="nl" name="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" name="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="sfzh" 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" name="email" style="width:120px" /></td>
<td><div id="emailTip" style="width:250px"></div></td>
</tr>
<tr>
<td align="right">你的學歷:</td>
<td> <select name="xueli" 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="ewjy" 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" name="Tel_country" style="width: 20px;" value="" />
-地區區號
<input id="Tel_area" name="Tel_area" style="width: 35px;" />
-電話號碼
<input id="Tel_number" name="Tel_number" style="width: 60px;" />
-分機號碼
<input id="Tel_ext" name="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="xqah_one" id="qq1"/>
乒乓球
<input type="checkbox" name="xqah_one" id="qq2" value="1" />
羽毛球
<input type="checkbox" name="xqah_one" id="qq3" value="2" />
上網
<input type="checkbox" name="xqah_one" id="qq4" value="3" />
旅遊
<input type="checkbox" name="xqah_one" 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="xqah_more" id="pp0"/>
乒乓球
<input type="checkbox" name="xqah_more" id="pp1" value="5" />
羽毛球
<input type="checkbox" name="xqah_more" id="pp7" value="6" />
上網
<input type="checkbox" name="xqah_more" id="pp8" value="7" />
旅遊
<input type="checkbox" name="xqah_more" id="pp9" value="8" />
購物
<input type="checkbox" name="xqah_more" 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="aiguo" value="1" id="bb1" />
不愛
<input type="radio" name="aiguo" id="bb2" value="2" />
不發表意見
<input type="radio" name="aiguo" id="nn3" value="3" />
愛
<input type="radio" name="aiguo" 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" name="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" name="lxdh" style="width:120px" /></td>
<td><div id="lxdhTip" style="width:250px"></div></td>
</tr>
<tr>
<td align="right">手機或電話:</td>
<td><input type="text" id="sjdh" name="sjdh" style="width:120px" /></td>
<td><div id="sjdhTip" style="width:250px"></div></td>
</tr>
<tr>
<td align="right" valign="top">多選select控件:</td>
<td valign="top">
<select name="selectmore" 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" name="ms" cols="50" rows="10">這裏是十個中文字符哦</textarea>
</td>
</tr>
<tr>
<td colspan="3"><div id="msTip" style="width:250px"></div></td>
</tr>
</table>
</form>
<div id="output"></div>
</body>
</html>
<script defer="defer" src="datepicker/WdatePicker.js" type="text/javascript"></script>jQuery formValidator表單驗證插件示例
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章