jQuery Validate基本使用及正则扩展
jQuery Validate介绍
jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。
该插件是由 Jörn Zaefferer 编写和维护的，他是 jQuery 团队的一名成员，是 jQuery UI 团队的主要开发人员，是 QUnit 的维护人员。该插件在 2006 年 jQuery 早期的时候就已经开始出现，并一直更新至今。目前版本是 1.14.0。
访问 jQuery Validate 官网，下载最新版的 jQuery Validate 插件。
jQuery Validate验证官网
jQuery Validate验证官网请参考：http://www.runoob.com/jquery/jquery-plugin-validate.html
jQuery Validate下载
菜鸟教程提供的 1.14.0 版本下载地址：http://static.runoob.com/download/jquery-validation-1.14.0.zip
jQuery Validate验证未成功效果
如果表单验证未通过，jQuery Validate自动给页面加上
jQuery Validate使用方法（改进版本）
请大家参考下面的写法(注意:userName是控件的name值)
$(document).ready(function(){
if(jsValidate){
var oldLoginName = $("#oldLoginName").val();
$("#inputForm").validate({
rules: {
userName:{
remote: ctxa+"/member/memberUser/validateLoginName.do?oldLoginName=" + encodeURIComponent(oldLoginName), //回调函数
regex:/^[1-9][0-9]{4,10}$/,//正则表达式验证
required: true,//判断是否非空
minlength: 5,//输入长度最小是 5 的字符串（汉字算一个字符）
maxlength:10,//输入长度最多是 10 的字符串（汉字算一个字符）
},
confirmNewPassword:{equalTo:"#newPassword",}, //新密码和确认新密码是否相同(注意#newPassword为新密码的id)
},
messages: {
userName:{
remote: "会员名称已存在", //用户名重复时提示
regex:"请输入5-10位的数字",//正则表达式不满足页面给的提示
required: "请输入用户名",//为空给的页面给的提示
minlength: "最小为5位",//长度不满足给的页面提示
maxlength: "最大为10位"//长度不满足给的页面提示
},
confirmNewPassword:{equalTo:"新密码和确认新密码不一致",},
},
submitHandler: function(form){
$("button[type='submit']").prop("disabled",true);//页面按钮点击之后按钮变为不能点状态
top.$.jBox.tip("正在提交，请稍等...",'loading',{opacity:0});//页面等待期间给一个旋转等待状态
form.submit();//页面form表单提交
}
});
}
});为了给jQuery Validate更多的扩展功能，增加正则表达式验证规则，规则名称：regex。
(function(){
jQuery.validator.addMethod("regex", //addMethod第1个参数:方法名称
function(value, element, params) { //addMethod第2个参数:验证方法，参数（被验证元素的值，被验证元素，参数）
var exp = new RegExp(params); //实例化正则对象，参数为传入的正则表达式
return this.optional(element) || exp.test(value); //测试不为空或者正则是否匹配
},
"格式错误"); //addMethod第3个参数:默认错误提示信息
})();如果你需要给多个相同的name值进行做验证规则
注意:同一个name需要都有id，但是id必须不同
/**
* 修改jquery validate的验证规则，
* 修改为可以验证相同name的多个input框
* */
if($.validator){
$.validator.prototype.elements = function () {
var validator = this,
rulesCache = {};
return $(this.currentForm)
.find("input, select, textarea")
.not(":submit, :reset, :image, [disabled]")
.not(this.settings.ignore)
.filter(function () {
if (!this.name && validator.settings.debug && window.console) {
console.error("%o has no name assigned", this);
}
rulesCache[this.name] = true;
return true;
});
}
}jQuery Validate使用方法（官方版本）
1.将校验规则写到控件中（不提倡，无法控制提示的文字）
2.将校验规则写到 js 代码中（提倡使用，常用的一些js表单验证）
$().ready(function() {
// 在键盘按下并释放及提交后验证提交表单
$("#signupForm").validate({
rules: {
firstname: "required",
lastname: "required",
username: {
required: true,
minlength: 2
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
},
email: {
required: true,
email: true
},
topic: {
required: "#newsletter:checked",
minlength: 2
},
agree: "required"
},
messages: {
firstname: "请输入您的名字",
lastname: "请输入您的姓氏",
username: {
required: "请输入用户名",
minlength: "用户名必需由两个字母组成"
},
password: {
required: "请输入密码",
minlength: "密码长度不能小于 5 个字母"
},
confirm_password: {
required: "请输入密码",
minlength: "密码长度不能小于 5 个字母",
equalTo: "两次密码输入不一致"
},
email: "请输入一个正确的邮箱",
agree: "请接受我们的声明",
topic: "请选择两个主题"
}
});