最近花時間看了看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文件如下圖
頁面驗證效果如下: