<!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=gb2312" />
<title>無標題文檔</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<style type="text/css">
#myForm label.error{
color:red;
}
</style>
</head>
<body>
<div style="padding-left:400px;padding-top:100px;">
<form method="post" action="aa.html" id="myForm">
<table>
<tr>
<td><label for="username">用戶名：</label></td>
<td><input type="text" id="username" name="username" /></td>
</tr>
<tr>
<td><label for="password">密碼：</label></td>
<td><input type="password" id="password" name="password"/></td>
</tr>
<tr>
<td><label for="confirmPassword">重複密碼：</label></td>
<td><input type="password" id="confirmPassword" name="confirmPassword"/></td>
</tr>
<tr>
<td><label for="age">年齡：</label></td>
<td><input type="text" id="age" name="age"/></td>
</tr>
<tr>
<td><label for="sex">性別：</label></td>
<td>
<label for="man">男</label><input name="sex" id="man" type="radio" checked="checked" value="男" />
<label for="woman">女</label><input name="sex" id="woman" type="radio" value="女" />
</td>
</tr>
<tr>
<td><label for="hobby">愛好：</label></td>
<td><select name="hobby" id="hobby">
<option value="">--</option>
<option value="足球">足球</option>
<option value="足球">唱歌</option>
<option value="足球">跳舞</option>
</select>
</td>
</tr>
<tr>
<td>電話號碼</td>
<td><input type="text" id="phone" name="phone"/></td>
</tr>
<tr>
<td>身份證號碼</td>
<td><input type="text" id="idCard" name="idCard"/></td>
</tr>
<tr>
<td><label for="email">郵箱：</label></td>
<td><input type="text" id="email" name="email"/></td>
</tr>
<tr>
<td><label for="url">網址：</label></td>
<td><input type="text" id="url" name="url"/></td>
</tr>
<tr>
<td><label for="date">日期：</label></td>
<td><input type="text" id="date" name="date"/></td>
</tr>
<tr>
<td><label for="image">圖片名稱：</label></td>
<td><input type="text" id="image" name="image"/></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" class="submit" id="b" value="註冊"/></td>
</tr>
</table>
</form>
</div>
<script type="text/javascript">
$(document).ready(function (){
/*
自定義增加一些驗證規則
*/
//手機號碼驗證
jQuery.validator.addMethod("mobile", function(value, element) {
var tel=/^1[3,5,8]\d{9}$/;
return this.optional(element) || (tel.test(value));
});
//座機號碼驗證
jQuery.validator.addMethod("phone", function(value, element) {
var tel=/^(^0\d{2}-?\d{8}$)|(^0\d{3}-?\d{7}$)|(^\(0\d{2}\)-?\d{8}$)|(^\(0\d{3}\)-?\d{7}$)$/;
return this.optional(element) || (tel.test(value));
});
//手機號或座機驗證
jQuery.validator.addMethod("telPhone", function(value, element) {
var telPhone=/^(^0\d{2}-?\d{8}$)|(^0\d{3}-?\d{7}$)|(^\(0\d{2}\)-?\d{8}$)|(^\(0\d{3}\)-?\d{7}$)$/;
var telMobile=/^1[3,5,8]\d{9}$/;
return this.optional(element) || (telPhone.test(value) && value.length==12) ||(telMobile.test(value));
});
//身份證號碼驗證
jQuery.validator.addMethod("idCard", function(value, element) {
var card=/^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/;
return this.optional(element) || (card.test(value)) );
});
//只能是字母數字或下劃線
jQuery.validator.addMethod("numberLine", function(value, element) {
var val=/^[a-zA-Z]\w*$/;
return this.optional(element) || (val.test(value));
});
/*
驗證主體
*/
$("#myForm").validate({
onkeyup:false,
rules:{
username:{
required:true,
numberLine:true
//remote:"user/validateUserName.action"
},
password:{
required:true,
minlength:3
},
confirmPassword:{
required:true,
equalTo:"#password"
},
age:{
required:true,
digits:true,
range:[0,100]
},
hobby:{
required:true
},
email:{
required:true,
email:true
},
url:{
required:true,
url:true
},
date:{
required:true,
date:true
},
image:{
required:true,
accept:"jpg|gif"
},
phone:{
required:true,
telPhone:true
},
idCard:{
required:true,
idCard:true
}
},
messages:{
username:{
required:"用戶名必填",
numberLine:"用戶名只能是字母數字下劃線,並以字母開頭"
//remote:"用戶名已存在"
},
password:{
required:"密碼必填",
minlength:jQuery.format("密碼至少爲{0}位")
},
confirmPassword:{
required:"重複密碼必填",
equalTo:"兩次輸入密碼不一致"
},
age:{
required:"年齡必填",
digits:"年齡必須爲數字",
range:jQuery.format("年齡必須在{0}到{1}之間")
},
hobby:{
required:"請選擇愛好"
},
email:{
required:"請輸入郵箱",
email:"郵箱格式錯誤([email protected])"
},
url:{
required:"請輸入網址",
url:"網址格式錯誤(http://baidu.com)"
},
date:{
required:"請輸入日期",
date:"日期格式錯誤(yyyy/MM/dd)"
},
image:{
required:"請輸入圖片",
accept:"圖片格式錯誤(*.jpg|*.gif)"
},
phone:{
required:"請輸入電話號碼",
telPhone:"電話格式不正確"
},
idCard:{
required:"請輸入身份證號碼",
idCard:"身份證格式不正確"
}
}
/*,
errorPlacement: function(error, element) { //錯誤消息放置的地方
error.appendTo(element.parent().find("span"));
}
*/
});
});
</script>
</body>
</html>