根据jquery的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",//默认注册表单IDajaxUrl : "/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规则时候就会遇到一些自己很头痛的事情