jquery 验证 validate 插件
jquery validate 插件
?
?
正则表达式
?
. ? ? ?匹配除换行符的任何字符
\w ? 匹配任何字母数字字符 ? ? ? ? ? ? ? ? ?\W ? ? ? ? ? 匹配任何非字母数字字符
\s ? ?匹配任何空白字符? ?\S? ? ? ? ? ?匹配任何非空白字符
\b ? ?匹配一个单词的开始和结尾? ? ? ? ? ?\B ? ? ? ? ? ?匹配非单词开始或结束的位置
^ ? ? 匹配字符串的开始? ?\D ? ? ? ? ? ?匹配任何非数字字符
$ ? ? 匹配字符串的结尾? ? ? ? ? ?[^X] ? ? ? ? 匹配任何非X字符
\d ? ?匹配任何数字? ? ? ? ? ?[^aeiou]? ??匹配任何不在aeiou中的字符
\i区分大小写例: rep = /^[a-z]/i
\g ? ?表明可以进行全局匹配
?
* ? ? ??匹配前面的子表达式零次或多次 ?例如，zo* 能匹配 "z" 以及 "zoo"。 * 等价于{0,}
+ ? ? ??匹配前面的子表达式一次或多次 ?例如，'zo+' 能匹配 "zo" 以及 "zoo"，但不能匹配 "z"。+ 等价于 {1,}
? ? ? ? ?匹配前面的子表达式零次或一次 ?例如，"do(es)?" 可以匹配 "do" 或 "does" 中的"do" 。? 等价于 {0,1}
{n} ? ? ? 重复n次
{n,} ? ? ?至少重复n次
{n,m} ? 至少重复n次,最多m次
? -----------------------------------------------------
?
jquery自带的验证方法
?
?
--------------------------------------------------------------------------
?
$(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'); ??
? } ??
}); ??
}); ??
?
