JQuery Validator使用實例

最近花時間看了看jQuery的validator插件，發現這個東西用來做web前端驗證確實很不錯，所以將例子記錄下來，以備後用。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JQuery Validator Demo</title>

<link rel="stylesheet" href="css/screen.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript">
	$(document).ready(
			function() {
				// 手機號碼驗證   
				jQuery.validator.addMethod("isMobile",
						function(value, element) {
							var length = value.length;
							return this.optional(element)
									|| (length == 11 && /^([1-9]{1}\d{10})$/
											.test(value));
						}, "請正確填寫手機號碼");

				// 數字驗證   
				jQuery.validator.addMethod("isNumber",
						function(value, element) {
							var length = value.length;
							return this.optional(element)
									|| (/^[1-9]?[0-9]$/.test(value));
						}, "請正確填寫年齡");

				$("#myForm").validate({
					rules : {
						username : {
							required : true,
							minlength : 6,
							remote : "test"
						},
						password : {
							required : true,
							remote : "test"
						},
						rePassword : {
							required : true,
							equalTo : "#password"
						},
						sex : "required",
						age : {
							required : true,
							isNumber : true
						},
						phone : {
							required : true,
							isMobile : true
						},
						email : {
							required : true
						}
					},
					messages : {
						username : {
							required : "請輸入用戶名",
							minlength : jQuery.format("用戶名長度必須大於{0}."),
							remote : jQuery.format("用戶名{0}已存在")
						},
						password : {
							required : "請輸入密碼",
							remote : "已存在"
						},
						rePassword : {
							required : "請再次輸入密碼",
							equalTo : "兩次密碼不一致"
						},
						sex : "請選擇性別",
						age : {
							required : "請輸入年齡"
						},
						phone : {
							required : "請輸入手機號碼"
						},
						email : {
							required : "請輸入電子郵箱"
						}
					},
					errorPlacement : function(error, element) {
						if (element.is(":radio"))
							error.appendTo(element.next().next());
						else if (element.is(":checkbox"))
							error.appendTo(element.next());
						else
							error.appendTo(element.next());
					},
					submitHandler: function() {
						alert("submitted!");
					},
					success: function(label) {
						label.html(" ").addClass("checked");
					}
				});
			});
</script>

<style type="text/css">
#myForm label.error {
	background: url("images/unchecked.gif") no-repeat 0px 0px;
	padding-left: 16px;
	padding-bottom: 2px;
	font-weight: bold;
	color: #EA5200;
}

#myForm label.checked {
	background: url("images/checked.gif") no-repeat 0px 0px;
}
</style>
</head>
<body>
	<form action="" id="myForm" style="padding: 50px 0 0 50px;">
		<fieldset>
			<legend>請輸入以下用戶信息</legend>
			<p>
				<label for="username">用戶名</label> <input id="username"
					name="username" type="text" /><label />
			</p>
			<p>
				<label for="password">密碼</label> <input id="password"
					name="password" type="password" /><label />
			</p>
			<p>
				<label for="rePassword">重複密碼</label> <input id="rePassword"
					name="rePassword" type="password" /><label />
			</p>
			<p>
				<label for="sex">性別</label> <input name="sex" type="radio" value="0">女
				<input name="sex" type="radio" value="1">男<label />
			</p>
			<p>
				<label for="age">年齡</label> <input id="age" name="age" type="text" /><label />
			</p>
			<p>
				<label for="phone">手機</label> <input id="phone" name="phone"
					type="text" /><label />
			</p>
			<p>
				<label for="email">電子郵箱</label> <input id="email" name="email"
					type="text" /><label />
			</p>
			<p>
				<input type="submit" value="提交">
			</p>
		</fieldset>
	</form>
</body>
</html>

項目中用到的js/css/images文件如下圖