<html xmlns="http://www.w3.org/1999/xhtml" >
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
<title>jQuery formValidator表单验证插件 -- by:猫冬，email:wzmaodong@126.com</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>
|
<script src="formValidator-4.1.3.js" type="text/javascript" charset="UTF-8"></script>
|
<script src="formValidatorRegex.js" type="text/javascript" charset="UTF-8"></script>
|
<script type="text/javascript">
|
$(document).ready(function(){
|
//第一组校验组，默认组号为"1"
|
$.formValidator.initConfig({formID:"form1",debug:true,onSuccess:function(){alert("校验组1通过验证，不过我不给它提交");},onError:function(){alert("具体错误，请看网页上的提示")}});
|
$("#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之间，请确认"});
|
|
//第二组校验组，组号为"2"
|
$.formValidator.initConfig({validatorGroup:"2",formID:"form2",debug:true,onSuccess:function(){alert("校验组2通过验证，不过我不给它提交")},onError:function(){alert("具体错误，请看网页上的提示")}});
|
$("#csny").formValidator({validatorGroup:"2",onShow:"请输入的出生日期",onFocus:"请输入的出生日期，不能全部是0哦",onCorrect:"你输入的日期合法"}).inputValidator({min:"1900-01-01",max:"2000-01-01",type:"date",onError:"日期必须在\"1900-01-01\"和\"2000-01-01\"之间"});
|
$("#sfzh").formValidator({validatorGroup:"2",onShow:"请输入15或18位的身份证",onFocus:"输入15或18位的身份证",onCorrect:"输入正确"}).functionValidator({fun:isCardID});
|
$("#email").formValidator({validatorGroup:"2",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({validatorGroup:"2",onShow:"请选择你的学历",onFocus:"学历必须选择",onCorrect:"谢谢你的配合",defaultValue:"a"}).inputValidator({min:1,onError: "你是不是忘记选择学历了!"});
|
|
})
|
</script>
|
<style type="text/css" media="all">
|
body{font-size:12px;}
|
tr{height:32px;}
|
</style>
|
</head>
|
<body>
|
|
<h2>jQuery formValidator表单验证插件示例</h2>
|
<p><strong>两个校验组。两个校验组是分开校验的，互不影响</strong></p>
|
<p>请访问官方网站获取更多的资料和帮助:<a href="http://www.yhuan.com/">http://www.yhuan.com/</a></p>
|
<fieldset style="width:520px;">
|
<LEGEND><SPAN id="help_topic_icon" style="font-weight:bold;font-size:12px">第一组</SPAN></LEGEND>
|
<form id='form1'>
|
<table border="0px" style="font-size:12px" width="630px">
|
<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" /></td>
|
<td><div id="nlTip" style="width:250px"></div></td>
|
</tr>
|
<tr><td colspan="3"><input id="Submit1" type="submit" value="验证第一组" /></td></tr>
|
</table></form>
|
</fieldset>
|
</br></br>
|
<fieldset style="width:520px;">
|
<LEGEND><SPAN id="help_topic_icon" style="font-weight:bold;font-size:12px">第二组</SPAN></LEGEND>
|
<form id='form2'>
|
<table border="0px" style="font-size:12px" width="630px">
|
<tr>
|
<td align="right">出生日期:</td>
|
<td><input type="text" id="csny" name="csny" style="width:120px" value="" /></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 colspan="3"><input id="Submit2" type="submit" value="验证第二组" /></td></tr>
|
</table></form>
|
</fieldset>
|
|
</body>
|
</html>
|
