<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表單驗證
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章