jQuery验证框架的使用
插件地址：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++;???
??????? }???
??????? }???
????? returnthis.optional(element) || ( length >= param[0] && length <= param[1] );???
??? }, "请确保输入的值在3-15个字节之间(一个中文字算2个字节)");???
??
??? /* 追加自定义验证方法 */???
??? // 身份证号码验证???
??? jQuery.validator.addMethod("isIdCardNo", function(value, element) {???
????? returnthis.optional(element) || isIdCardNo(value);???
??? }, "请正确输入您的身份证号码");???
??
??? // 字符验证???
??? jQuery.validator.addMethod("userName", function(value, element) {???
????? returnthis.optional(element) ||/^[\u0391-\uFFE5\w]+$/.test(value);???
??? }, "用户名只能包括中文字、英文字母、数字和下划线");???
??
??? // 手机号码验证???
??? jQuery.validator.addMethod("isMobile", function(value, element) {???
????? var length = value.length;???
????? returnthis.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;???
????? returnthis.optional(element) || (tel.test(value));???
??? }, "请正确填写您的电话号码");???
??
??? // 邮政编码验证???
??? jQuery.validator.addMethod("isZipCode", function(value, element) {???
????? var tel =/^[0-9]{6}$/;???
????? returnthis.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');???
?????? }???
??? });???
});???
