jquery.validate.js是JQuery旗下的一個驗證插件，借助JQuery的優勢，我們可以迅速驗證一些常見的輸入,並且可以自己擴充自己的驗證方法。使用前請先下載必要的JQuery插件：jquery-1.4.2.min.js和jquery.validate.min.js。
下面演示如何使用jquery.validate.js插件進行表單的驗證。
這是HTML表單：<form id="regFrom" name="regFrom">
<input type="submit" value="測試validion插件"/><p/>
<div>用戶名：<input type="text" id="userName" name="userName"/></div><div style="float:left;"></div>
<div>密碼：<input type="text" id="password" name="password" minlength="3"/></div><div style="float:left;"></div>
<div>確認密碼：<input type="text" id="repassword" name="repassword" minlength="3"/></div><div style="float:left;"></div>
<div>問題：<input type="text" id="question" name="question"/></div><div style="float:left;"></div>
<div>答案：<input type="text" id="answer" name="answer"/></div><div style="float:left;"></div>
<div>真實姓名：<input type="text" id="realName" name="realName"/></div><div style="float:left;"></div>
<div>證件號碼：<input type="text" id="cardNumber" name="cardNumber"/></div><div style="float:left;"></div>
<div>手機：<input type="text" id="mobilePhone" name="mobilePhone"/></div><div style="float:left;"></div>
<div>電話：<input type="text" id="phone" name="phone"/></div><div style="float:left;"></div>
<div>E-mail：<input type="text" id="email" name="email"/></div><div style="float:left;"></div>
<div>郵編：<input type="text" id="zipCode" name="zipCode"/></div><div style="float:left;"></div>
<input type="hidden" id="isUserNameExist"/>
</form>
這是我的表單驗證代碼：$(document).ready(function() {
$.validator.setDefaults({
submitHandler : function(form) {
form.submit();
}
});
// 中文字兩個字節
jQuery.validator.addMethod("byteRangeLength", function(value, element,
param) {
var length = value.length;
for (var i = 0; i < value.length; i++) {
if (value.charCodeAt(i) > 127) {
length++;
}
}
return this.optional(element)
|| (length >= param[0] && length <= param[1]);
}, "<font color='red'>請確保輸入的值在3-15個字節之間(一個中文字算2個字節)</font>");
// 用戶名是否存在
jQuery.validator.addMethod("isUserNameExist", function(value, element) {
var flag = $.ajax({
type : "POST",
url : "validateServlet",
data : "username=" + value,
async : false,
success : function(msg) {
alert("返回數據: " + msg);
}
}).responseText;
return this.optional(element) || flag == 1;
}, "<font color='red'>該用戶不存在</font>");
// 身份證號碼驗證
jQuery.validator.addMethod("isIdCardNo", function(value, element) {
return this.optional(element) || isIdCardNo(value);
}, "<font color='red'>請正確輸入您的身份證號碼</font>");
// 字符驗證
jQuery.validator.addMethod("userName", function(value, element) {
return this.optional(element)
|| /^[\u0391-\uFFE5\w]+$/.test(value);
}, "<font color='red'>用戶名只能包括中文字、英文字母、數字和下劃線</font>");
// 手機號碼驗證
jQuery.validator.addMethod("isMobile", function(value, element) {
var length = value.length;
return this.optional(element)
|| (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/
.test(value));
}, "<font color='red'>請正確填寫您的手機號碼</font>");
// 電話號碼驗證
jQuery.validator.addMethod("isPhone", function(value, element) {
var tel = /^(\d{3,4}-?)?\d{7,9}$/g;
return this.optional(element) || (tel.test(value));
}, "<font color='red'>請正確填寫您的電話號碼</font>");
// 郵政編碼驗證
jQuery.validator.addMethod("isZipCode", function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, "<font color='red'>請正確填寫您的郵政編碼</font>");
$(regFrom).validate({
rules : {
userName : {
required : true,
userName : true,
byteRangeLength : [3, 15],
isUserNameExist : true
},
password : {
required : true
},
repassword : {
required : true,
equalTo : "#password"
},
question : {
required : true
},
answer : {
required : true
},
realName : {
required : true
},
cardNumber : {
isIdCardNo : true
},
mobilePhone : {
isMobile : true
},
phone : {
isPhone : true
},
email : {
required : true,
email : true
},
zipCode : {
isZipCode : true
}
},
messages : {
userName : {
required : "<font color='red'>請填寫用戶名</font>",
byteRangeLength : "<font color='red'>用戶名必須在3-15個字符之間(一個中文字算2個字符)</font>",
isUserNameExist : "<font color='red'>該用戶不存在</font>"
},
password : {
required : "<font color='red'>請填寫密碼</font>",
minlength : jQuery
.format("<font color='red'>至少輸入{0}個字符.</font>")
},
repassword : {
required : "<font color='red'>請填寫確認密碼poluoluo</font>",
equalTo : "<font color='red'>兩次密碼輸入不相同</font>",
minlength : jQuery
.format("<font color='red'>至少輸入{0}個字符.</font>")
},
question : {
required : "<font color='red'>請填寫您的密碼提示問題</font>"
},
answer : {
required : "<font color='red'>請填寫您的密碼提示答案</font>"
},
realName : {
required : "<font color='red'>請填寫您的真實姓名</font>"
},
email : {
required : "<font color='red'>請輸入一個Email地址</font>",
email : "<font color='red'>請輸入一個有效的Email地址</font>"
}
},
errorPlacement : function(error, element) {
error.appendTo(element.parent());
},
success : function(label) {
// set as text for IE
label.html("<font color='green'>OK!</font>");
},
focusInvalid : false,
onkeyup : false
});
// 輸入框獲得焦點時，樣式設置
$('input').focus(function() {
if ($(this).is(":text") || $(this).is(":password"))
$(this).addClass('focus');
if ($(this).hasClass('have_tooltip')) {
$(this).parent().parent().removeClass('field_normal')
.addClass('field_focus');
}
});
// 輸入框失去焦點時，樣式設置
$('input').blur(function() {
$(this).removeClass('focus');
if ($(this).hasClass('have_tooltip')) {
$(this).parent().parent().removeClass('field_focus')
.addClass('field_normal');
}
});
});