<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>註冊表單驗證</title>
<link rel="stylesheet" type="text/css" media="screen" href="../jquery/reg/css/screen.css" />
<script src="../jquery/reg/js/jquery.js" type="text/javascript"></script>
<script src="../jquery/reg/js/jquery.validate.js" type="text/javascript"></script>
<script>
$.validator.setDefaults({
submitHandler: function(form) {
alert("submitted!");
form.submit();
}
});
$().ready(function (){
//自行定義的驗證方法
jQuery.validator.addMethod("cardValidate",function(value, element, param) {
//獲取用戶輸入的值，判斷是否爲空
if(value==""){
return false;
}
return true;
}
);
//自行定義的驗證方法
jQuery.validator.addMethod("cardLength",function(value, element, param) {
//獲取用戶輸入的值，長度是否等於15或者是18
if(value.length!=15&&value.length!=18){
alert(value.length);
return false;
}
return true;
}
);
$("#form1").validate({
rules:{
username:{
required:true,
minlength:6
},
user:{
required:true,
rangelength:[5,8]//將長度控制在一段長度
},
password:{
required:true,
rangelength:[6,12]
},
repassword:{
required:true,
rangelength:[6,12],
equalTo:"#password" //判斷是否重複輸入密碼正確
},
sex:{
required:true,
minlength:1
},
year:{
required:true,
range:[26,50]
},
date:{
required:true,
dateISO:true
},
email:{
required:true,
email:true
},
card:{
cardValidate:true,
rangelength:[15,18]
}
},
messages:{
username:{
required:"用戶名不能爲空！",
minlength:"用戶名長度不能小於6位"
},
user:{
required:"密碼不能爲空！",
rangelength:"登錄名空，長度應該在5~8之間，可包含中文字符（一個漢字算一個字符）"
},
password:{
required:"密碼不能爲空！",
rangelength:"密碼長度在6~12字符或數字，不能包含中文字符"
},
repassword:{
required:"密碼不能爲空！",
rangelength:"密碼長度在6~12字符或數字，不能包含中文字符",
equalTo:"密碼和重複密碼內容不一致"
},
sex:{
required:"用戶名不能爲空！",
minlength:"請選擇性別"
},
year:{
required:"用戶名不能爲空！",
range:"員工的年齡只能在26~50之間"
},
date:{
required:"出生日期不能爲空！",
dateISO:"請寫入正確的日期格式"
},
email:{
required:"郵箱不能爲空！",
email:"請輸入正確的郵箱格式"
},
card:{
cardValidate:"身份證號不能爲空！",
rangelength:"身份證的長度15~18"
}
}
});
});
</script>
</head>
<body>
<hr />
<form id="form1" action="" method="post">
員工信息錄入
<hr />
<center>
<table border="1" bordercolor="#0033FF" >
<tr><td>
真實姓名（不能爲空，沒有其他要求）：</td><td><input type="text" name="username" id="username" /></td></tr>
<tr><td>
登錄名（登錄名不能爲空，長度應該在5~8之間，可包含中文字符（一個漢字算一個字符））：</td><td><input type="text" name="user" id="user" /></td></tr>
<tr><td>
密碼（不能爲空，長度在6~12字符或數字，不能包含中文字符）：</td><td><input type="password" name="password" id="password" /></td></tr>
<tr><td>
重複密碼（密碼不能爲空，長度在6~12字符或數字，不能包含中文字符）：rangelength:[6,12]</td><td><input type="password" name="repassword" id="repassword" /><br>
</td></tr>
<tr><td>
性別（必選其一）：</td><td><input type="radio" name="sex" id="sex" value="man" />男
<input type="radio" name="sex" id="sex" value="women" />女</td></tr>
<tr><td>年齡（必填 26~50）range:[26,50]</td><td><input type="text" id="year" name="year"/></td></tr>
<tr><td>
你的學歷:</td><td>
<select>
<option>--請選擇你的學歷--</option>
<option> 經濟管理</option>
<option>市場調查</option>
<option>緊急策劃</option>
<option>市場營銷</option>
<option>外形設計</option>
</select>
</td></tr>
<tr><td>出生日期（1982/09/21）:</td><td><input type="text" id="date" name="date" /></td></tr>
<tr><td>興趣愛好:</td><td>
<input type="checkbox" id="pingpang" name="like"/>乒乓球
<input type="checkbox" id="yumao" name="like"/>羽毛球
<input type="checkbox" id="shangwang" name="like"/>上網
<input type="checkbox" id="lvyou" name="like"/>旅遊
<input type="checkbox" id="gouwu" name="like"/>購物
</td></tr>
<tr><td>電子郵箱:email:true</td><td><input type="text" id="email" name="email"/></td></tr>
<tr><td>身份證（15~18）:</td><td><input type="text" id="card" name="card" /></td></tr>
<tr><td></td><td style="float:right">
<input type="submit" value="保存" />
</td></tr></table></center>
</form>
</body>
</html>
jQuery驗證插件
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章