插件地址：http://bassistance.de/jquery-plugins/jquery-plugin-validation/
download：http://jquery.bassistance.de/validate/jquery.validate.zip
demo:http://jquery.bassistance.de/validate/demo/
$(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]
);???
??? }, "请确保输入的值在3-15个字节之间(一个中文字算2个字节)");???
??
???
/*
追加自定义验证方法 */???
??? // 身份证号码验证???
???
jQuery.validator.addMethod("isIdCardNo", function(value,
element) {???
????? return this.optional(element) ||
isIdCardNo(value);???
??? }, "请正确输入您的身份证号码");???
??
???
//
字符验证???
??? jQuery.validator.addMethod("userName", function(value,
element) {???
????? return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);???
??? }, "用户名只能包括中文字、英文字母、数字和下划线");???
??
???
//
手机号码验证???
??? 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));???
??? }, "请正确填写您的手机号码");???
??
???
//
电话号码验证???
??? jQuery.validator.addMethod("isPhone", function(value,
element) {???
????? var tel = /^(\d{3,4}-?)?\d{7,9}$/g;???
?????
return
this.optional(element) ||
(tel.test(value));???
??? }, "请正确填写您的电话号码");???
??
???
//
邮政编码验证???
??? jQuery.validator.addMethod("isZipCode", function(value,
element) {???
????? var tel = /^[0-9]{6}$/;???
?????
return
this.optional(element) ||
(tel.test(value));???
??? }, "请正确填写您的邮政编码");???
???
??? $(regFrom).validate({???
??? /* 设置验证规则
*/???
????? rules: {???
??????? userName: {???
???????????? required:
true,???
???????????? userName: true,???
???????????? byteRangeLength: [3,15]???
???????
},???
??????? password: {???
???????????? required: true,???
???????????? minLength: 5???
??????? },???
??????? repassword: {???
???????????? required: true,???
???????????? minLength: 5,???
???????????? 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: "请填写用户名",???
???????
byteRangeLength: "用户名必须在3-15个字符之间(一个中文字算2个字符)"???
??? },???
??? password: {???
???????? required: "请填写密码",???
????????
minlength: jQuery.format("输入{0}.")???
??? },???
??? repassword: {???
????????
required: "请填写确认密码",???
???????? equalTo: "两次密码输入不相同"???
??? },???
??? question: {???
???????? required: "请填写您的密码提示问题"???
??? },???
??? answer: {???
???????? required: "请填写您的密码提示答案"???
??? },???
??? realName: {???
???????? required: "请填写您的真实姓名"???
??? },???
??? email: {???
???????? required: "请输入一个Email地址",???
???? email:
"请输入一个有效的Email地址"???
??? }???
?? },???
??? /* 错误信息的显示位置 */???
???
errorPlacement: function(error, element) {???
??? error.appendTo(
element.parent() );???
?? },???
??? /* 验证通过时的处理
*/???
? success: function(label) {???
? // set??? as text for
IE???
??? label.html(" ").addClass("checked");???
?? },???
??? /* 获得焦点时不验证 */???
??
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');???
??????
}???
??? });???
}); ? ?