jquery+ajax驗(yàn)證不通過(guò)也提交表單問(wèn)題處理

更新時(shí)間：2014年12月12日 14:22:20 投稿：hebedich

這篇文章主要介紹了jquery validationEngine中使用ajax驗(yàn)證不通過(guò)也提交表單問(wèn)題處理,需要的朋友可以參考下

validationEngine給我們?yōu)榍岸说谋韱悟?yàn)證減少了很大的工作量.大部分情況我們使用validationEngine驗(yàn)證表單的形式有幾種方式:

1 使用正常的表單提交.這種情況validationEngine驗(yàn)證不通過(guò)是不會(huì)提交表單的.

2 使用ajax提交表單,但是沒(méi)有使用ajax驗(yàn)證.

這種方式也比較簡(jiǎn)單,在我們使用ajax請(qǐng)求前檢查驗(yàn)證是否通過(guò)就可以,例如:

//驗(yàn)證不通過(guò)時(shí)return  

    if(!$("form#ajaxForm").validationEngine("validate")) return ;  

    $.ajax({  

       type: "POST",  

       url: $("#ajaxForm").attr("action"),  

       data: $("#ajaxForm").serialize(),  

       dataType: "html",  

       success: function(data){  

          xxxx     }  

    });

3 使用正常表單提交,但是有使用ajax驗(yàn)證,這種方式有點(diǎn)讓人糾結(jié)了.當(dāng)我們提交表單時(shí)ajax驗(yàn)證不通過(guò)也能提交表單,關(guān)于這種情況,網(wǎng)上很多例子是改源碼的,下面是截圖:

.這種方法對(duì)于目前這種情況可行,這種修改的方式本身就不建議,可能對(duì)其它地方產(chǎn)生影響.我發(fā)現(xiàn)的其中一個(gè)就是當(dāng)下面這種情況時(shí):

復(fù)制代碼代碼如下:

function beforeCall(form,options){  

    if(window.console){  

        console.log("表單提交驗(yàn)證通過(guò)后，Ajax 提交之前的回調(diào)");  

    };  

    return true;  

};  

//   

function ajaxValidationCallback(status,form,json,options){  

    if(window.console){  

        console.log(status);  

    };  

    if(status === true){  

        alert("the form is valid!");  

    }  

};  

jQuery(document).ready(function(){  

    jQuery("#formID").validationEngine({  

        ajaxFormValidation: true,  //是否使用 Ajax 提交表單  

        ajaxFormValidationMethod: 'post',  //設(shè)置 Ajax 提交時(shí)，發(fā)送數(shù)據(jù)的方式  

        onAjaxFormComplete: ajaxValidationCallback,  //表單提交，Ajax 驗(yàn)證完成后  

        onBeforeAjaxFormValidation: beforeCall  //表單提交驗(yàn)證通過(guò)后，Ajax 提交之前的回調(diào)  

    });  

});

beforeCall 這個(gè)方法是不會(huì)調(diào)用的是不會(huì)調(diào)用的,所以還是不能使用

4 使用ajax驗(yàn)證并且使用ajax提交表單,這個(gè)方式就讓人糾結(jié)了,上面修改源碼的方式就不好用了.

對(duì)于第三種和第四種方式,解決方式如下:

在使用ajax驗(yàn)證的表單form標(biāo)簽上加上自定義屬性control="userName,email" 屬性值為要使用ajax驗(yàn)證的控件id(多個(gè)控件使用逗號(hào)分隔開(kāi)).

復(fù)制代碼代碼如下:

<form method="post" id="ajaxForm2Controls" action="admin/user/savePro.htm" control="userName">

在每個(gè)需要驗(yàn)證的控件上加上兩個(gè)屬性u(píng)rl(ajax請(qǐng)求的地址)和errror(不通過(guò)時(shí)的提示信息)

復(fù)制代碼代碼如下:

<input class="textBox validate[required,minSize[6],maxSize[128],custom[onlyLetterNumber]]" type="text" name="userName" id="userName" maxlength="128" url="admin/user/uniqueName.htm" error="用戶已存在..."/>  

javascript當(dāng)中聲明兩個(gè)全局?jǐn)?shù)組

復(fù)制代碼代碼如下:

var controlId = new Array();  //保存驗(yàn)證不通過(guò)的控件ID

var errors = new Array() ;  //保存驗(yàn)證不通過(guò)的提示信息

思路是這個(gè)的獲取form標(biāo)簽上的control屬性上的值(使用逗號(hào)分隔獲取每個(gè)控件ID),使用ajax遍歷請(qǐng)求,當(dāng)驗(yàn)證不通過(guò)時(shí) 將控件ID和提示信息添加到controlId 和 errors 中,并且提示信息.當(dāng)提交表單時(shí)判斷controlId 是否為空,不為空則循環(huán)顯示提示信息.

復(fù)制代碼代碼如下:

$(function() {    

    var ajaxForm2Controls = $("form#ajaxForm2Controls") ;  

    //表單提交時(shí)  

    $(ajaxForm2Controls).submit(function() {  

        ajaxForm2Control(ajaxForm2Controls) ;  

        return false ;  

    }) ;  

    //失去焦點(diǎn)時(shí)驗(yàn)證控件  

    valControls(ajaxForm2Controls) ;  

});

表單提交方法:

復(fù)制代碼代碼如下:

function ajaxForm2Control(obj) {  

    //當(dāng)存在錯(cuò)誤信息時(shí)返回,找顯示錯(cuò)誤信息  

    if(controlId.length > 0) {  

        alertinfo() ;  

        return false ;   

    }  

    if(!$(obj).validationEngine("validate")) return false;  //驗(yàn)證沒(méi)有使用ajax驗(yàn)證的控件(不是ajax驗(yàn)證的字段是可以正常驗(yàn)證的, 不通過(guò)就返回)  

    $.ajax({  

       type: "POST",  

       url: $(obj).attr("action"),  

       data: $(obj).serialize(),  

       dataType: "html",  

       success: function(data){  

           xxxxxx  

       }  

    });  

}

為表單添加焦點(diǎn)事件

復(fù)制代碼代碼如下:

//表單需要驗(yàn)證的控件  

function valControls(ajaxForm2Controls) {  

    //獲取需要使用ajax驗(yàn)證的控件  

    var controlsStr = ajaxForm2Controls.attr("control") ;  

    //屬性未定義時(shí)返回  

    if(typeof(controlsStr) === "undefined" || controlsStr.length <= 0) return ;  

    //分隔獲取控件ID  

    var controls = controlsStr.split(/,/g) ;  

    for(var i in controls) {  

        //添加焦點(diǎn)離開(kāi)事件  

        $("#" + controls[i]).blur(function() {  

          if($(this).val().length <= 0) return false;  

            //重新設(shè)置數(shù)組  

            controlId.length = 0;   

            errors.length = 0 ;  

            //錯(cuò)誤信息  

            var error = $(this).attr("error") ;  

            $.ajax({  

               type: "GET",  

               url: $(this).attr("url"),  

               data: $(this).serialize(),  

               dataType: "text",  

               success: function(data){  

                   if(data==="true") {  

                     //驗(yàn)證不通過(guò)將錯(cuò)誤信息放入數(shù)組中  

                       controlId.push(controls[i]);  

                       errors.push(error) ;  

                       //提示信息  

                       alertinfo() ;  

                   }  

               }  

            });  

        }) ;  

    }  

}

錯(cuò)誤提示信息:

復(fù)制代碼代碼如下:

//彈出信息  

function alertinfo() {  

    if(controlId.length > 0) {  

        for(var i in controlId) {  

            //validationEngine方法,為指定ID彈出提示.  

                        //用法:<span style="">$("#id").validationEngine("showPrompt","提示內(nèi)容","load");  

                           //<span style="">在該元素上創(chuàng)建一個(gè)提示，3 種狀態(tài)："pass", "error", "load"</span></span>  

            $("#" + controlId[i]).validationEngine("showPrompt", errors[i], "error");  

        }   

    }  

}

這樣當(dāng)我們無(wú)論是第三種方式還是第四種方式提交表單,提交前調(diào)用controlId是否有值就可以了.

您可能感興趣的文章: