很好用的JQuery表单验证插件——jquery.validate.js

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'>请填写确认密码</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');
}
});
});