需要JQuery版本：1.2.6+, 兼容 1.3.2
<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>
//開始驗證
$('#submitForm').validate({
/**//* 設置驗證規則 */
rules: {
username: {
required:true,
stringCheck:true,
byteRangeLength:[3,15]
},
email:{
required:true,
email:true
},
phone:{
required:true,
isPhone:true
},
address:{
required:true,
stringCheck:true,
byteRangeLength:[3,100]
}
},
/** 設置錯誤信息 */
messages: {
username: {
required: "請填寫用戶名",
stringCheck: "用戶名只能包括中文字、英文字母、數字和下劃線",
byteRangeLength: "用戶名必須在3-15個字符之間(一箇中文字算2個字符)"
},
email:{
required: "請輸入一個Email地址",
email: "請輸入一個有效的Email地址"
},
phone:{
required: "請輸入您的聯繫電話",
isPhone: "請輸入一個有效的聯繫電話" //這裏引用addMethod方法中的name屬性
},
address:{
required: "請輸入您的聯繫地址",
stringCheck: "請正確輸入您的聯繫地址",
byteRangeLength: "請詳實您的聯繫地址以便於我們聯繫您"
}
},
/* 設置驗證觸發事件 */
focusInvalid: false,
onkeyup: false,
/** 設置錯誤信息提示DOM */
errorPlacement: function(error, element) {
error.appendTo( element.parent());
},
});
});
以下爲個人的完整案例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Emp Info Validate 2</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="../js/jquery.validate.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="../css/screen.css" />
<style type="text/css">
h3 {
text-align: center;
color: lightseagreen;
}
table {
border: 1px solid grey;
text-align: left;
margin: 0 auto;
background-color: lightsteelblue;
width: 18em;
}
</style>
<script type="text/javascript">
$().ready(function() {
$("#empForm").validate({
rules:{
userName: {
required: true,
rangelength: [5, 8]
},
realName: {
required: true
},
pwd: {
required: true,
rangelength: [6, 12]
},
pwd2: {
required: true,
rangelength: [6, 12],
equalTo: "#pwd"
},
age: {
required: true,
range: [18, 50]
},
birthday: {
required: true,
date: true
},
email: {
required: true,
email: true
}
},
messages:{
userName: {
required: "登陸名不能爲空",
rangelength: "登陸名長度應該在5-8之間"
},
realName: {
required: "真實姓名不能爲空"
},
pwd: {
required: "密碼不能爲空",
rangelength: "密碼長度應該在6-12之間"
},
pwd2: {
required: "確認密碼不能爲空",
rangelength: "確認密碼長度應該在6-12之間",
equalTo: "兩次輸入的密碼不一致"
},
age: {
required: "年齡不能爲空",
range: "年齡應該在26-50之間"
},
birthday: {
required: "出生日期不能爲空",
date: "出生日期的格式不對"
},
email: {
required: "電子郵件不能爲空",
email: "必須輸入正確的電子郵件"
}
}
});
});
</script>
</head>
<body>
<h3>Emp Validate 2</h3>
<br/>
<form id="empForm" name="empForm" method="post" action="">
<table cellpadding="0" cellspacing="15">
<tr>
<td>UserName:</td>
<td><input type="text" id="userName" name="userName"/></td>
</tr>
<tr>
<td>RealName:</td>
<td><input type="text" id="realName" name="realName"/></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" id="pwd" name="pwd"/></td>
</tr>
<tr>
<td>Confirm:</td>
<td><input type="password" id="pwd2" name="pwd2"/></td>
</tr>
<tr>
<td>Gender:</td>
<td>
<input type="radio" name="gender" id="gender_M" value="M"/>Male
<input type="radio" name="gender" id="gender_F" value="F"/>Female
</td>
</tr>
<tr>
<td>Age:</td>
<td><input type="text" id="age" name="age"/></td>
</tr>
<tr>
<td>Birthday:</td>
<td><input type="text" id="birthday" name="birthday"/></td>
</tr>
<tr>
<td>E-mail:</td>
<td><input type="text" id="email" name="email"/></td>
</tr>
<tr>
<td></td>
<td><input type="submit" id="firstname" name="firstname" value="Submit"/></td>
</tr>
</table>
</form>
</body>
<script type="text/javascript">
$("h3").each(function(index, domEle) {
$(domEle).click(function() {
$(domEle).next().slideToggle("slow");
});
});
</script>
</html>