根据jquery.validate.js写的一个通用的form表单校验插件
就jquery.validate这个当前比较流行的form表单校验框架，自己学着对当前官网项目需求写了个注册的插件。
但这里我并不想说，自己的这个插件具体是如何实现的，我只是想回顾一下validate本身的一些性质
(1)jquery的extend方法
这个方法很重要，它在实际js框架开发中可以为我们做出比较大的贡献，它的用法如下：
validationData = jQuery.extend(validationData, newValidationData);
这个意思就是合并validationData和newValidationData，如果newValidationData里拥有了validationData公共的部分，则会被newValidationData替换掉
如果newValidationData里面有的而validationData没有则会合并到新的validationData里，这样我们在实际传参中就可以做到不固定，不限量的传参了。
下面为了更好的说明一些问题，我这里还是把我的插件贴出来，但是目的不是告诉你我写了一个多么强大牛叉的表单注册校验插件，而是想告诉大家一些validate
和jquery的用法(主要是看里面的注释)
/**
* 注册表单验证 插件
* formId 表单id
* @param formId
*/
/**
* error ajax
*/
jQuery.validator.addMethod("zznum", function(value, element) {
return this.optional(element) || (/^[1-9]*[1-9][0-9]*$/.test(value));
}, "只能输入正整数");
jQuery.validator.addMethod("fdnum2", function(value, element) {
return this.optional(element) ||
(/^(0|[1-9]\d*)$|^(0|[1-9]\d*)\.(\d{1,2})$/.test(value));
}, "只能输入2位正浮点数");
jQuery.validator.addMethod("znum", function(value, element) {
return this.optional(element) || (/^([1-9]\d{0,}|0)$/.test(value));
}, "只能输入大于等于0的整数");
var defaultAjaxErrorMethod = function(XMLHttpRequest, textStatus, errorThrown) {
if(XMLHttpRequest.status != 406) {
alert(XMLHttpRequest.status);
} else {
alert(jQuery.parseJSON(XMLHttpRequest.responseText).msg);
}
getValidateServlets();
};
/**
* 默认提交后ajax 200状态回调 success ajax
*/
var defaultAjaxCalbackMethod = function(data) {
$("#registerDivId").css("display", "none");
$("#registerSuccessDivId").css("display", "block");
$("#regName").text("用户名是:" + data.userName);
};
/**
* 默认 提交前错误回调
*/
var defaultValiErrorMethod = function(error,element){
$("#errorShowId").empty();
error.appendTo($("#errorShowId"));
var msg = $("#errorShowId").text();
var ele = $(element);
var s = ele.val();
if(msg.length!=0) {
if(ele.attr("type") != "checkbox") {
ele.next().css("display","block");
ele.css("display","none");
ele.next().val(msg);
ele.next().bind("focus",fuc2=function(){
ele.css("display","block");
ele.next().css("display","none");
ele.val(s);
ele.next().unbind("focus",fuc2);
ele.next().val("");
ele.focus();
});
} else {
alert(msg);
}
}
};
/**
* 默认提交前 单个元素验证通过回调函数
*/
var defaultValiSucceMethod = function(label) {
};
/**
* 定义一些插件中需要用到的默认常量,这些东西都可以被覆盖，更可以添加新的进来（直接在引用页面里加就可以了）
*/
var validationData = {
regFormId : "#registgerFormId",
//默认注册表单ID
ajaxUrl : "/register/quick",
userNameRemote : "/register/checkname", // 异步请求校验重复性路径
passwordId : "#passwordId",// 密码输入框Id 检测两次输入密码是否一致
userName : "input[name='username']", // 选择通行证注册与选择邮箱注册时切换输入框内容
autchImageId : "imagedid",
authImageUrl:"/register/captcha-image?",
submitObj:".submitclass",//定义提交按钮为图片或其他非input按钮时候用到的
ajaxErrorMethod : defaultAjaxErrorMethod,
ajaxCalbackMethod : defaultAjaxCalbackMethod,
valiErrorMethod : defaultValiErrorMethod,
valiSucceMethod: defaultValiSucceMethod,
usernameRequiredMsg: "没有填写用户名",
usernameRegexusernameMsg: "只能输入字符串和数字",
usernameMinlengthMsg:"用户名不能小于{0}个字符",
usernameRemoteMsg:"用户名已经被注册",
passwordRequiredMsg:"没有填写密码",
passwordMinlengthMsg:"密码最少{0}个字符",
password_confirmationRequiredMsg:"没有确认密码",
password_confirmationEqualToMsg:"两次输入密码不一致嘛",
captchaEqualToMsg:"填写验证码",
captchaMaxlengthMsg:"验证码最多{0}个字符",
licenseRequiredMsg:"是否同意服务条款",
rightEmailMsg:"请输入正确格式邮箱",
emailRequiredMsg:"请输入邮箱地址",
notEqualNameAndPaswd: "用户名和密码不能相同!",
userNameMinLength:6,
passMinLength:6,
captMaxLength:4
};
/**
* 引用页面需要调用的方法
* registgerFormId 为注册表单ID
* defaultErrorMethod 处理错误的方法名称
* defaultCalbackMethod 处理 回调的方法名称
* null 为一些需要用到的常量，这里 写法为{a:'value',b:'value'}
*/
var validatorRegisterForm = function(newValidationData) {
$("body").after("<span id='errorShowId' style='display:none;'></span>");
/**
* 初始化常量，若newValidationData不为空，则会合并validationData
*/
validationData = jQuery.extend(true,validationData, newValidationData);
/**
* 定义默认的ajax请求参数
*/
var ajaxOptions = {
url : validationData.ajaxUrl,
type : "post",
dataType : "json",
success : function(data,status,XMLHttpRequest) { // 注册请求回调处理方法
validationData.ajaxCalbackMethod(data,status,XMLHttpRequest);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
validationData.ajaxErrorMethod(XMLHttpRequest, textStatus, errorThrown);
}
};
/**
* 更改validator默认的form提交方式为异步ajax并执行提交操作
*/
$.validator.setDefaults({
submitHandler : function(form) {
var param = $(validationData.regFormId).serialize();
ajaxOptions = jQuery.extend(ajaxOptions, {
data : param
});
$.ajax(ajaxOptions);
}
});
/**
* 注意opts的定义必须要放在下面这句之前，不然的话，外面传递进来的自定义消息都没用了
*/
$(validationData.regFormId).validate({
onkeyup : false,
rules : {
username : {
required : true,
notChina : true,
minlength : validationData.userNameMinLength,
remote:validationData.userNameRemote
},
password : {
required : true,
minlength : validationData.passMinLength,
notEqualTo:validationData.userName
},
password_confirmation : {
required : true,
equalTo : validationData.passwordId
},
captcha : {
required : true,
maxlength : validationData.CaptMaxLength
},
license : {
required : true
}
},
messages : {
username : {
required : validationData.usernameRequiredMsg,
notChina : validationData.usernameRegexusernameMsg,
minlength : jQuery.format(validationData.usernameMinlengthMsg),
remote: validationData.usernameRemoteMsg
},
password : {
required : validationData.passwordRequiredMsg,
minlength : jQuery.format(validationData.passwordMinlengthMsg)
},
password_confirmation : {
required : validationData.password_confirmationRequiredMsg,
equalTo : validationData.password_confirmationEqualToMsg
},
captcha : {
required : validationData.captchaEqualToMsg,
maxlength : jQuery.format(validationData.captchaMaxlengthMsg)
},
license : {
required : validationData.licenseRequiredMsg
}
},
errorPlacement: validationData.valiErrorMethod,
success: validationData.valiSucceMethod
});
/**
* 图片做submit提交
*/
$(validationData.submitObj).click(function() {
$(validationData.regFormId).submit();
});
};
/**
* 默认的选择普通注册还是邮箱注册
* 这里规定registerType=1 为普通注册，为2为邮箱注册 可以被替换或重写
* **/
var selectRegisterType = function(registerType) {
/*
* 选择注册方式（通行证注册，邮箱注册）
*/
$(validationData.userName).css("display", "block");
$(validationData.userName).next().css("display", "none");
$(validationData.userName).val("");
$(validationData.userName).next().val("");
if (registerType == 1) { // 通行证注册
$(validationData.userName).rules("add", {notChina: true,messages:{notChina:validationData.usernameRegexusernameMsg}});
$(validationData.userName).rules("remove","email");
$(validationData.userName).next().val(validationData.usernameRequiredMsg);
} else { // 邮箱注册
$(validationData.userName).rules("add", {email: true,messages:{email:validationData.rightEmailMsg}});//"请输入正确格式邮箱"
$(validationData.userName).rules("remove","notChina");
$(validationData.userName).next().val(validationData.emailRequiredMsg); //请输入邮箱地址
}
/**
* 因为每个校验规则都是有顺序，所以这里必须在上面添加完成email或regexusername规则后，再重新添加一次异步验证重复性规则
* 不然会先去验证重复性
*/
$(validationData.userName).rules("remove","remote");
$(validationData.userName).rules("add", {remote: validationData.userNameRemote,
messages:{remote:validationData.usernameRemoteMsg}});
$(validationData.userName).next().css("display", "block");
$(validationData.userName).css("display", "none");
$(validationData.userName).next().bind("focus", function() {
$(this).css("display", "none");
$(this).prev().css("display", "block");
$(this).prev().focus();
});
};
/**
* 自定义一些正则表达式校验规则 这个是登录名通行证注册时，过滤中文的
*/
jQuery.validator.addMethod("notChina", function(value, element){
var notChinaReg = /^([a-zA-Z0-9]+)$/;
return this.optional(element) || (notChinaReg.test(value));}, validationData.usernameRegexusernameMsg);
jQuery.validator.addMethod("notEqualTo", function(value, element, param) {
return value != $(param).val();
}, $.validator.format(validationData.notEqualNameAndPaswd));
/*
* 更换验证码
*/
var getValidateServlets = function() {
document.getElementById(validationData.autchImageId). validationData.authImageUrl< /div>
+ Math.random();
};
var changCurso = function() {
document.getElementById(validationData.autchImageId).style.cursor = "pointer";
};
那么页面端的调用就是这样（当然需要导入jquery，jquery.validate包）
$(document).ready(function(){
/*
*表单校验
* registgerFormId 为注册表单ID
* methodShowError1 处理错误的方法名称
* calback1 处理 回调的方法名称
* null 为一些需要用到的常量，这里 写法为{a:'value',b:'value'} ，如这里a与插件中的默认常量相同则会覆盖插件中的
* 比如说，这里我插件里定义的默认表单Id为registgerFormId，但是如果我的页面里的表单Id不是这个而是formId,那么我就可以把null变为{regFormId:formId}
*/
validatorRegisterForm(methodShowError1,calback1,null);
});
(2)还有一点儿需要提出来说明的是：jquery.validate的rules规则都是按顺序来的，这个不能理解好，在实际的add,remove规则时候就会遇到一些自己很头痛的事情