根据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 : "p_w_picpathdid",

authImageUrl:"/register/captcha-p_w_picpath?",

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规则时候就会遇到一些自己很头痛的事情