亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時(shí)間:2014年12月12日 14:22:20   投稿:hebedich  
這篇文章主要介紹了jquery validationEngine中使用ajax驗(yàn)證不通過也提交表單問題處理,需要的朋友可以參考下

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

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

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

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

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

//驗(yàn)證不通過時(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ān)于這種情況,網(wǎng)上很多例子是改源碼的,下面是截圖:

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

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

function beforeCall(form,options){ 
    if(window.console){ 
        console.log("表單提交驗(yàn)證通過后,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)證通過后,Ajax 提交之前的回調(diào) 
    }); 
}); 

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

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

對于第三種和第四種方式,解決方式如下:

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

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

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

在每個(gè)需要驗(yàn)證的控件上加上兩個(gè)屬性url(ajax請求的地址)和errror(不通過時(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)證不通過的控件ID
var errors = new Array() ;  //保存驗(yàn)證不通過的提示信息

思路是這個(gè)的獲取form標(biāo)簽上的control屬性上的值(使用逗號分隔獲取每個(gè)控件ID),使用ajax遍歷請求,當(dāng)驗(yàn)證不通過時(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)證沒有使用ajax驗(yàn)證的控件(不是ajax驗(yàn)證的字段是可以正常驗(yàn)證的, 不通過就返回) 
    $.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)離開事件 
        $("#" + 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)證不通過將錯(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)我們無論是第三種方式還是第四種方式提交表單,提交前調(diào)用controlId是否有值就可以了.

相關(guān)文章

  • jquery禁用右鍵示例

    jquery禁用右鍵示例

    這篇文章主要介紹了jquery禁用右鍵示例,需要的朋友可以參考下
    2014-04-04
  • 詳解jQuery選擇器

    詳解jQuery選擇器

    本文主要對jQuery選擇器進(jìn)行一一舉例介紹,有助于學(xué)習(xí)、理解和記憶。具有很好的參考價(jià)值,下面就跟著小編一起來看下吧
    2016-12-12
  • Jquery實(shí)現(xiàn)縱向橫向菜單

    Jquery實(shí)現(xiàn)縱向橫向菜單

    這篇文章主要介紹了Jquery實(shí)現(xiàn)縱向橫向菜單的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-01-01
  • jQuery繼承extend用法詳解

    jQuery繼承extend用法詳解

    這篇文章主要為大家詳細(xì)介紹了jQuery繼承extend用法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-10-10
  • 基于jQuery中ajax的相關(guān)方法匯總(必看篇)

    基于jQuery中ajax的相關(guān)方法匯總(必看篇)

    下面小編就為大家?guī)硪黄诨趈Query中ajax的相關(guān)方法匯總。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-11-11
  • BootStrap下jQuery自動(dòng)完成的樣式調(diào)整

    BootStrap下jQuery自動(dòng)完成的樣式調(diào)整

    這篇文章主要介紹了BootStrap下jQuery自動(dòng)完成的樣式調(diào)整的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下
    2016-05-05
  • 如何確保JavaScript的執(zhí)行順序 之jQuery.html并非萬能鑰匙

    如何確保JavaScript的執(zhí)行順序 之jQuery.html并非萬能鑰匙

    在上一篇文章《如何確保JavaScript的執(zhí)行順序 - 之jQuery.html深度分析》中,我們揭示了jQuery.html函數(shù)之所以能在各種瀏覽器下保持動(dòng)態(tài)JS順序執(zhí)行,其秘密在于 – 同步AJAX獲取外部JavaScript。
    2011-03-03
  • jQuery移動(dòng)端圖片上傳組件

    jQuery移動(dòng)端圖片上傳組件

    這篇文章主要介紹了jQuery移動(dòng)端圖片上傳組件,使用File API+canvas 客戶端壓縮圖片,并實(shí)現(xiàn)文件上傳服務(wù)端,感興趣的小伙伴們可以參考一下
    2016-06-06
  • jQuery之動(dòng)畫效果大全

    jQuery之動(dòng)畫效果大全

    本篇文章主要介紹了jQuery之動(dòng)畫效果,詳細(xì)的介紹了各種動(dòng)畫特效的用法,有需要的可以了解一下。
    2016-11-11
  • 在每個(gè)匹配元素的外部插入新元素的方法

    在每個(gè)匹配元素的外部插入新元素的方法

    本文為大家介紹下在每個(gè)匹配元素的外部插入新元素的方法,下面有個(gè)不錯(cuò)的示例,感興趣的朋友可以參考下
    2013-12-12

最新評論