就jquery.validate這個(gè)當(dāng)前比較流行的form表單校驗(yàn)框架，自己學(xué)著對(duì)當(dāng)前官網(wǎng)項(xiàng)目需求寫(xiě)了個(gè)注冊(cè)的插件。
這個(gè)意思就是合并validationData和newValidationData，如果newValidationData里擁有了validationData公共的部分，則會(huì)被newValidationData替換掉
如果newValidationData里面有的而validationData沒(méi)有則會(huì)合并到新的validationData里，這樣我們?cè)趯?shí)際傳參中就可以做到不固定，不限量的傳參了。
下面為了更好的說(shuō)明一些問(wèn)題，我這里還是把我的插件貼出來(lái)，但是目的不是告訴你我寫(xiě)了一個(gè)多么強(qiáng)大牛叉的表單注冊(cè)校驗(yàn)插件，而是想告訴大家一些validate
/**
* 注冊(cè)表單驗(yàn)證 插件
* 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));
}, "只能輸入正整數(shù)");
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位正浮點(diǎn)數(shù)");
jQuery.validator.addMethod("znum", function(value, element) {
return this.optional(element) || (/^([1-9]\d{0,}|0)$/.test(value));
}, "只能輸入大于等于0的整數(shù)");
var defaultAjaxErrorMethod = function(XMLHttpRequest, textStatus, errorThrown) {
if(XMLHttpRequest.status != 406) {
alert(XMLHttpRequest.status);
} else {
alert(jQuery.parseJSON(XMLHttpRequest.responseText).msg);
}
getValidateServlets();
};
/**
* 默認(rèn)提交后ajax 200狀態(tài)回調(diào) success ajax
*/
var defaultAjaxCalbackMethod = function(data) {
$("#registerDivId").css("display", "none");
$("#registerSuccessDivId").css("display", "block");
$("#regName").text("用戶名是:" + data.userName);
};
/**
* 默認(rèn) 提交前錯(cuò)誤回調(diào)
*/
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);
}
}
};
/**
* 默認(rèn)提交前 單個(gè)元素驗(yàn)證通過(guò)回調(diào)函數(shù)
*/
var defaultValiSucceMethod = function(label) {
};
/**
* 定義一些插件中需要用到的默認(rèn)常量,這些東西都可以被覆蓋，更可以添加新的進(jìn)來(lái)（直接在引用頁(yè)面里加就可以了）
*/
var validationData = {
regFormId : "#registgerFormId",//默認(rèn)注冊(cè)表單ID
ajaxUrl : "/register/quick",
userNameRemote : "/register/checkname", // 異步請(qǐng)求校驗(yàn)重復(fù)性路徑
passwordId : "#passwordId",// 密碼輸入框Id 檢測(cè)兩次輸入密碼是否一致
userName : "input[name='username']", // 選擇通行證注冊(cè)與選擇郵箱注冊(cè)時(shí)切換輸入框內(nèi)容
autchImageId : "p_w_picpathdid",
authImageUrl:"/register/captcha-p_w_picpath?",
submitObj:".submitclass",//定義提交按鈕為圖片或其他非input按鈕時(shí)候用到的
ajaxErrorMethod : defaultAjaxErrorMethod,
ajaxCalbackMethod : defaultAjaxCalbackMethod,
valiErrorMethod : defaultValiErrorMethod,
valiSucceMethod: defaultValiSucceMethod,
usernameRequiredMsg: "沒(méi)有填寫(xiě)用戶名",
usernameRegexusernameMsg: "只能輸入字符串和數(shù)字",
usernameMinlengthMsg:"用戶名不能小于{0}個(gè)字符",
usernameRemoteMsg:"用戶名已經(jīng)被注冊(cè)",
passwordRequiredMsg:"沒(méi)有填寫(xiě)密碼",
passwordMinlengthMsg:"密碼最少{0}個(gè)字符",
password_confirmationRequiredMsg:"沒(méi)有確認(rèn)密碼",
password_confirmationEqualToMsg:"兩次輸入密碼不一致嘛",
captchaEqualToMsg:"填寫(xiě)驗(yàn)證碼",
captchaMaxlengthMsg:"驗(yàn)證碼最多{0}個(gè)字符",
licenseRequiredMsg:"是否同意服務(wù)條款",
rightEmailMsg:"請(qǐng)輸入正確格式郵箱",
emailRequiredMsg:"請(qǐng)輸入郵箱地址",
notEqualNameAndPaswd: "用戶名和密碼不能相同!",
userNameMinLength:6,
passMinLength:6,
captMaxLength:4
};
/**
* 引用頁(yè)面需要調(diào)用的方法
* registgerFormId 為注冊(cè)表單ID
* defaultErrorMethod 處理錯(cuò)誤的方法名稱
* defaultCalbackMethod 處理 回調(diào)的方法名稱
* null 為一些需要用到的常量，這里 寫(xiě)法為{a:'value',b:'value'}
*/
var validatorRegisterForm = function(newValidationData) {
$("body").after("<span id='errorShowId' style='display:none;'></span>");
/**
* 初始化常量，若newValidationData不為空，則會(huì)合并validationData
*/
validationData = jQuery.extend(true,validationData, newValidationData);
/**
* 定義默認(rèn)的ajax請(qǐng)求參數(shù)
*/
var ajaxOptions = {
url : validationData.ajaxUrl,
type : "post",
dataType : "json",
success : function(data,status,XMLHttpRequest) { // 注冊(cè)請(qǐng)求回調(diào)處理方法
validationData.ajaxCalbackMethod(data,status,XMLHttpRequest);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
validationData.ajaxErrorMethod(XMLHttpRequest, textStatus, errorThrown);
}
};
/**
* 更改validator默認(rèn)的form提交方式為異步ajax并執(zhí)行提交操作
*/
$.validator.setDefaults({
submitHandler : function(form) {
var param = $(validationData.regFormId).serialize();
ajaxOptions = jQuery.extend(ajaxOptions, {
data : param
});
$.ajax(ajaxOptions);
}
});
/**
* 注意opts的定義必須要放在下面這句之前，不然的話，外面?zhèn)鬟f進(jìn)來(lái)的自定義消息都沒(méi)用了
*/
$(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();
});
};
/**
* 默認(rèn)的選擇普通注冊(cè)還是郵箱注冊(cè)
* 這里規(guī)定registerType=1 為普通注冊(cè)，為2為郵箱注冊(cè) 可以被替換或重寫(xiě)
* **/
var selectRegisterType = function(registerType) {
/*
* 選擇注冊(cè)方式（通行證注冊(cè)，郵箱注冊(cè)）
*/
$(validationData.userName).css("display", "block");
$(validationData.userName).next().css("display", "none");
$(validationData.userName).val("");
$(validationData.userName).next().val("");
if (registerType == 1) { // 通行證注冊(cè)
$(validationData.userName).rules("add", {notChina: true,messages:{notChina:validationData.usernameRegexusernameMsg}});
$(validationData.userName).rules("remove","email");
$(validationData.userName).next().val(validationData.usernameRequiredMsg);
} else { // 郵箱注冊(cè)
$(validationData.userName).rules("add", {email: true,messages:{email:validationData.rightEmailMsg}});//"請(qǐng)輸入正確格式郵箱"
$(validationData.userName).rules("remove","notChina");
$(validationData.userName).next().val(validationData.emailRequiredMsg); //請(qǐng)輸入郵箱地址
}
/**
* 因?yàn)槊總€(gè)校驗(yàn)規(guī)則都是有順序，所以這里必須在上面添加完成email或regexusername規(guī)則后，再重新添加一次異步驗(yàn)證重復(fù)性規(guī)則
* 不然會(huì)先去驗(yàn)證重復(fù)性
*/
$(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();
});
};
/**
* 自定義一些正則表達(dá)式校驗(yàn)規(guī)則 這個(gè)是登錄名通行證注冊(cè)時(shí)，過(guò)濾中文的
*/
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));
/*
* 更換驗(yàn)證碼
*/
var getValidateServlets = function() {
document.getElementById(validationData.autchImageId). validationData.authImageUrl< /div>
+ Math.random();
};
var changCurso = function() {
document.getElementById(validationData.autchImageId).style.cursor = "pointer";
};
那么頁(yè)面端的調(diào)用就是這樣（當(dāng)然需要導(dǎo)入jquery，jquery.validate包）
$(document).ready(function(){
/*
*表單校驗(yàn)
* registgerFormId 為注冊(cè)表單ID
* methodShowError1 處理錯(cuò)誤的方法名稱
* calback1 處理 回調(diào)的方法名稱
* null 為一些需要用到的常量，這里 寫(xiě)法為{a:'value',b:'value'} ，如這里a與插件中的默認(rèn)常量相同則會(huì)覆蓋插件中的
* 比如說(shuō)，這里我插件里定義的默認(rèn)表單Id為registgerFormId，但是如果我的頁(yè)面里的表單Id不是這個(gè)而是formId,那么我就可以把null變?yōu)閧regFormId:formId}
*/
validatorRegisterForm(methodShowError1,calback1,null);
});
(2)還有一點(diǎn)兒需要提出來(lái)說(shuō)明的是：jquery.validate的rules規(guī)則都是按順序來(lái)的，這個(gè)不能理解好，在實(shí)際的add,remove規(guī)則時(shí)候就會(huì)遇到一些自己很頭痛的事情
