<html>
<head>
<title>无标题文档</title>
<meta charset="utf-8" />
<script src="jquery-1.3.2.js"></script>
<script src="jquery.validate.js"></script>
<script src="jquery.datepick.js"></script>
<link rel="stylesheet" href="screen.css" />
<link rel="stylesheet" href="jquery.datepick.css" />
<script>
$(function(){
$("input[name=birthday]").datepick({dateFormat:"yy/mm/dd"});
//自定义规则
$.validator.addMethod("sfz",function(value){
re = /^\d{18}$|^\d{17}[Xx]$/;
//返回true成功，false失败
return re.test(value);
});
$("#testForm").validate(
{
rules:{
realname:{
required:true
},loginname:{
required:true,
minlength:5,
maxlength:8
},pwd1:{
required:true,
rangelength:[6,12]
},pwd2:{
required:true,
equalTo:"input[name=pwd1]"
},gender:{
required:true
},age:{
required:true,
min:20,
max:50
},edu:{
min:1
},like:{
required:true
},email:{
email:true
},idcard:{
sfz:true
}
},
messages:{
realname:{
required:"姓名不能为空！"
},loginname:{
required:"登录名不能为空！",
minlength:"最少5列",
maxlength:"最多8列"
},pwd1:{
required:"登陆密码不能为空",
rangelength:"最少6列，最多12列"
},pwd2:{
required:"确认密码不能为空",
equalTo:"两次密码不一致"
},age:{
required:"年龄不能为空",
min:"最小20岁",
max:"最大50岁"
},edu:{
min:"必须选择一个学历"
},email:{
email:"邮箱错误！"
},idcard:{
sfz:"×××号填写错误！"
}
}
}
);
});
</script>
</head>
<body>
员工信息录入:
<div id="main">
<form id="testForm" action="2.html">
<table>
<tr>
<td>真实姓名(必填)</td>
<td><input name="realname" /></td> </tr>
<tr>
<td>登录名(必填,长度为5-8列之间)</td>
<td><input name="loginname" /></td> </tr>
<tr>
<td>密码(必填,长度为6-12列之间)</td>
<td><input name="pwd1" /></td> </tr>
<tr>
<td>确认密码</td>
<td><input name="pwd2" /></td> </tr>
<tr>
<td>性别(必选其一)</td>
<td>
<input name="gender" type="radio" />男
<input name="gender" type="radio" />女
<label for="gender" class="error" style="display:none;">必须选择一个性别</label>
</td>
</tr>
<tr>
<td>年龄(必填,20-50之间)</td>
<td><input name="age" /></td>
</tr>
<tr>
<td>你的学历</td>
<td>
<select name="edu">
<option value="0">--请选择你的学历--</option>
<option value="1">初中</option>
<option value="2">高中</option>
<option value="3">大专</option>
</select>
</td>
</tr>
<tr>
<td>出生日期(1995/5/5)</td>
<td><input name="birthday" readonly /></td>
</tr>
<tr>
<td>兴趣爱好</td>
<td>
<input type="checkbox" name="like" />羽毛球
<input type="checkbox" name="like" />上网
<input type="checkbox" name="like" />旅游
<input type="checkbox" name="like" />购物
<label for="like" class="error" style="display:none;">必须选择一项</label>
</td>
</tr>
<tr>
<td>电子邮箱</td>
<td><input name="email" /></td> </tr>
<tr>
<td>×××</td>
<td><input name="idcard" /></td> </tr>
<tr>
<td colspan="2" align="right">
<input type="submit" value="保存" />
</td>
</tr> </table>
</form>
</div>
</body>
</html>
Jquery表单验证
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章