实例详解jQuery表单验证插件validate

确定

jQuery.extend(jQuery.validator.messages, {
required: "必选字段",
remote: "请修正该字段",
email: "请输入正确格式的电子邮件",
url: "请输入合法的网址",
date: "请输入合法的日期",
dateISO: "请输入合法的日期 (ISO).",
number: "请输入合法的数字",
digits: "只能输入整数",
creditcard: "请输入合法的信用卡号",
equalTo: "请再次输入相同的值",
accept: "请输入拥有合法后缀名的字符串",
maxlength: jQuery.validator.format("请输入一个 长度最多是 {0} 的字符串"),
minlength: jQuery.validator.format("请输入一个 长度最少是 {0} 的字符串"),
rangelength: jQuery.validator.format("请输入 一个长度介于 {0} 和 {1} 之间的字符串"),
range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),
max: jQuery.validator.format("请输入一个最大为{0} 的值"),
min: jQuery.validator.format("请输入一个最小为{0} 的值")
});

required: "This field is required.",
remote: "Please fix this field.",
email: "Please enter a valid email address.",
url: "Please enter a valid URL.",
date: "Please enter a valid date.",
dateISO: "Please enter a valid date (ISO).",
number: "Please enter a valid number.",
digits: "Please enter only digits",
creditcard: "Please enter a valid credit card number.",
equalTo: "Please enter the same value again.",
accept: "Please enter a value with a valid extension.",
maxlength: $.validator.format("Please enter no more than {0} characters."),
minlength: $.validator.format("Please enter at least {0} characters."),
rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
range: $.validator.format("Please enter a value between {0} and {1}."),
max: $.validator.format("Please enter a value less than or equal to {0}."),
min: $.validator.format("Please enter a value greater than or equal to {0}.")

$().ready(function() {
$("#form2").validate({
rules: {
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
}
},
messages: {
password: {
required: "没有填写密码",
minlength: jQuery.format("密码不能小于{0}个字符")
},
confirm_password: {
required: "没有确认密码",
minlength: "确认密码不能小于{0}个字符",
equalTo: "两次输入密码不一致嘛"
}
}
});
});

$("#form2").validate({
rules: {
funcvalidate: {
required: function() {return $("#password").val()!=""; }
}
},
messages: {
funcvalidate: {
required: "有密码的情况下必填"
}
}
});

密码
确认密码
条件验证

$("#form3").validate({ meta: "validate" }); 

email

$().ready(function() {
$.metadata.setType("attr", "validate");
$("#form1").validate();
});

// 字符验证 
jQuery.validator.addMethod("userName", function(value, element) {
return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);
}, "用户名只能包括中文字、英文字母、数字和下划线"); 
//然后就可以使用这个规则了
$("#form1").validate({
// 验证规则
rules: {
userName: {
required: true,
userName: true,
rangelength: [5,10]
}
},
/* 设置错误信息 */
messages: {
userName: {
required: "请填写用户名",
rangelength: "用户名必须在5-10个字符之间"
} 
},
}); 

男

女

选项1

选项2

选项3

1
2
3

remote: {
url: "url", //url地址
type: "post", //发送方式
dataType: "json", //数据格式 data: { //要传递的数据
username: function() {
return $("#username").val();
}}
}

$(".selector").validate({
submitHandler: function(form) { alert("验证通过"); }
});

$(".selector").validate({
debug: true
})

$.validator.setDefaults({
debug: true
})

$(".selector").validate({
ignore: "ignore"
})

$(".selector").validate({
onsubmit: false
})

$(".selector").validate({
onfocusout: false
})

$(".selector").validate({
onkeyup: false
})

$(".selector").validate({
onclick: false
})

//重写max的的验证提示信息
$.validator.messages.max = jQuery.format("Your totals musn't exceed {0}!");
//重写equal方法
$.validator.methods.equal = function(value, element, param) {
return value == param;
};

$(".selector").validate({
focusInvalid: false
})

$(".selector").validate({
focusCleanup: true
})

$(".selector").validate({
meta: "validate",
})

/* 输入控件验证出错*/
form input.error { border:solid 1px red;}
/* 验证错误提示信息*/
form label.error{width: 200px;margin-left: 10px; color: Red;}

$(".selector").validate
errorElement: "em"
})

$(".selector").validate({
wrapper: "li"
})

$(".selector").validate({
errorClass: "invalid"
})

$(".selector").validate({
success: "valid"
})

success: function(label) {
label.html(" ").addClass("checked");
}

$("#myform").validate({
errorLabelContainer: "#messageBox"
})

$(".selector").validate({
errorPlacement: function(error, element) {
error.appendTo( element.parent("td").next("td") );
}
})

$(".selector").validate({
groups: {
username: "fname lname"
},
errorPlacement: function(error, element) {
if (element.attr("name") == "fname" || element.attr("name") == "lname" )
error.insertAfter("#lastname");
else
error.insertAfter(element);
}
})

$(".selector").validate({
highlight: function(element, errorClass) {
$(element).addClass(errorClass);
$(element.form).find("label[for=" + element.id + "]").addClass(errorClass);
},
unhighlight: function(element, errorClass) {
$(element).removeClass(errorClass);
$(element.form).find("label[for=" + element.id + "]").removeClass(errorClass);
}
});

$(".selector").validate({
showErrors: function(errorMap, errorList) {
$("#summary").html("Your form contains " + this.numberOfInvalids()
+ " errors, see details below.");
this.defaultShowErrors();
}
})

// 手机号码验证
jQuery.validator.addMethod("mobile", function(value, element) {
var length = value.length;
var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/
return this.optional(element) || (length == 11 && mobile.test(value));
}, "手机号码格式错误"); 
// 电话号码验证 
jQuery.validator.addMethod("phone", function(value, element) {
var tel = /^(0[0-9]{2,3}\-)&＃63;([2-9][0-9]{6,7})+(\-[0-9]{1,4})&＃63;$/;
return this.optional(element) || (tel.test(value));
}, "电话号码格式错误");
// 邮政编码验证 
jQuery.validator.addMethod("zipCode", function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, "邮政编码格式错误");
// QQ号码验证 
jQuery.validator.addMethod("qq", function(value, element) {
var tel = /^[1-9]\d{4,9}$/;
return this.optional(element) || (tel.test(value));
}, "qq号码格式错误");
// IP地址验证
jQuery.validator.addMethod("ip", function(value, element) {
var ip = /^(&＃63;:(&＃63;:25[0-5]|2[0-4][0-9]|[01]&＃63;[0-9][0-9]&＃63;)\.){3}(&＃63;:25[0-5]|2[0-4][0-9]|[01]&＃63;[0-9][0-9]&＃63;)$/;
return this.optional(element) || (ip.test(value) && (RegExp.$1 <256 && RegExp.$2 <256 && RegExp.$3 <256 && RegExp.$4 <256));
}, "Ip地址格式错误");
// 字母和数字的验证
jQuery.validator.addMethod("chrnum", function(value, element) {
var chrnum = /^([a-zA-Z0-9]+)$/;
return this.optional(element) || (chrnum.test(value));
}, "只能输入数字和字母(字符A-Z, a-z, 0-9)");
// 中文的验证
jQuery.validator.addMethod("chinese", function(value, element) {
var chinese = /^[\u4e00-\u9fa5]+$/;
return this.optional(element) || (chinese.test(value));
}, "只能输入中文");
// 下拉框验证
$.validator.addMethod("selectNone", function(value, element) {
return value == "请选择";
}, "必须选择一项");
// 字节长度验证
jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
var length = value.length;
for (var i = 0; i  127) {
length++;
}
}
return this.optional(element) || (length >= param[0] && length <= param[1]);
}, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)"));