根據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規則時候就會遇到一些本身很頭痛的事情