2011-01-19 60 views
2

這是我的代碼:jQuery的AJAX驗證工作部分

$(function() { 

     var name = $("#name"), 
      email = $("#email"), 
      password = $("#password"), 
      allFields = $([]).add(name).add(email).add(password), 
      tips = $(".validateTips"); 

     function updateTips(t) { 
      tips 
       .text(t) 
       .addClass("ui-state-highlight"); 
      setTimeout(function() { 
       tips.removeClass("ui-state-highlight", 1500); 
      }, 500); 
     } 

     function checkLength(o, n, min, max) { 
      if (o.val().length > max || o.val().length < min) { 
       o.addClass("ui-state-error"); 
       updateTips("Length of " + n + " must be between " + 
        min + " and " + max + "."); 
       return false; 
      } else { 
       return true; 
      } 
     } 

     function checkRegexp(o, regexp, n) { 
      if (!(regexp.test(o.val()))) { 
       o.addClass("ui-state-error"); 
       updateTips(n); 
       return false; 
      } else { 
       return true; 
      } 
     } 

function ajaxValidate(type,fval,n) { 
    //alert(type+" "+fval.val()+" "+n); 
    $.ajax({ 
     type: "GET", 
     url: "ajaxValidate.php", 
     data: "type="+type+"&q="+escape(fval.val()), 
     success: function(msg){ 
     if (msg != "") { 
     fval.addClass("ui-state-error"); 
     updateTips(n); 
      return false; 
     } 
     else { 
      return true; 
     } 
     } 
    }); 
} 

     $("#dialog-form").dialog({ 
      autoOpen: false, 
      height: 540, 
      width: 420, 
      modal: true, 
      buttons: { 
       "Create an account": function() { 
        var bValid = true; 
        allFields.removeClass("ui-state-error"); 

        bValid = bValid && checkLength(name, "username", 3, 16); 
        bValid = bValid && checkLength(email, "email", 6, 80); 
        bValid = bValid && checkLength(password, "password", 5, 16); 
        bValid = bValid && ajaxValidate("user", name,"Username is taken"); 
        bValid = bValid && ajaxValidate("email", email,"Email address is taken"); 


        bValid = bValid && checkRegexp(name, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter."); 
        // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/ 
        bValid = bValid && checkRegexp(email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. [email protected]"); 
        bValid = bValid && checkRegexp(password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9"); 

        if (bValid) { 
         $("#users tbody").append("<tr>" + 
          "<td>" + name.val() + "</td>" + 
          "<td>" + email.val() + "</td>" + 
          "<td>" + password.val() + "</td>" + 
         "</tr>"); 

         document.forms["regform"].submit(); 
         $(this).dialog("close"); 

        } 
       }, 
       Cancel: function() { 
        $(this).dialog("close"); 
       } 
      }, 
      close: function() { 
       allFields.val("").removeClass("ui-state-error"); 
      } 
     }); 

     $("#create-user") 
      .button() 
      .click(function() { 
       $("#dialog-form").dialog("open"); 
      }); 
    }); 

我的問題是與ajaxValidate功能和調用該函數的代碼的兩行。

由於一些奇怪的原因,它只能運行一次,也就是說,如果您保持第一次調用以驗證用戶,它將正確執行,但不會驗證電子郵件,但如果您先將電子郵件驗證呼叫它會驗證它,但不會驗證用戶。

驗證腳本的其餘部分工作,所以如果我註釋掉兩個呼叫線,一切都完美。

PHP腳本也適用。

這是爲什麼?

UPDATE:

玉傢伙,我已經通過統一的驗證請求有點改變了功能,所以現在ajaxValidate看起來是這樣的:

function ajaxValidate(fval1,fval2,n) { 
    //alert(type+" "+fval.val()+" "+n); 
    $.ajax({ 
     type: "GET", 
     url: "ajaxValidate.php", 
     data: "?email="+escape(fval1.val())+"&user="+escape(fval2.val()), 
     success: function(msg){ 
     alert(fval1.val()); 
     alert(msg); 
     } 
    }); 
} 

給函數的調用看起來像這樣的:

bValid = bValid && ajaxValidate(email, name ,"Email/User address is taken"); 

而且ajaxValidate.php看起來是這樣的:

現在
require_once('classes/db/conn.php'); 
$user = $_GET['user']; 
$email = $_GET['email']; 


$query_user = mysql_fetch_array(mysql_query("SELECT USR_ID FROM users WHERE USR_Username = '$user'")); 

$query_email= mysql_fetch_array(mysql_query("SELECT USR_ID FROM users WHERE USR_Email = '$email'")); 


echo("SELECT USR_ID FROM users WHERE USR_Email = " . $email); 

,我提交表單後,我應該得到一個警報,它是如何在電子郵件中,並與Ajax響應的內容一個警報應該是SQL查詢從$_GET電子郵件變種。

我得到的是,在第一次提醒我正確地獲得電子郵件地址,並在第二次提醒我得到整個查詢,但沒有電子郵件地址。 (SELECT USR_ID FROM users WHERE USR_Email =

我要瘋了,我弄不明白這個!

+0

的,這將是有用的信息,幾件......你能告訴是否Ajax調用正在向服務器發出的,以及他們正在返回?你有沒有嘗試設置一個明確的返回值,如下面的答案中所建議的?這看起來好像有一個合理的工作機會,但是你沒有評論這個結果(如果沒有其他的話,在ajaxValidate結尾添加返回true將會有效地否定validaton,但是確定問題是否會返回一個false value ... – Chris 2011-01-24 10:02:55

+0

我不確定如何設置「顯式返回值」 – 2011-01-24 10:10:12

+0

我不確定是否將調用發送到php腳本,但我可以告訴你我已經測試了php腳本它的工作 – 2011-01-24 10:33:40

回答

0

我認爲問題是,您正在爲數據鍵傳遞一個字符串值,而實際上它正在期待一個對象。例如。 - {0} -

jQuery.ajax({type:「GET」,url:「/」,data:「?bob = bob & carol = carol」,success:function(){console.log(arguments.length); }})

其實打網址 - ? stackoverflow.com/?_=1295905818376 &先令=鮑勃&頌歌=頌歌

鑑於 -

jQuery的。ajax({type:「GET」,url:「/」,data:{bob:「bob」,carol:「carol」},success:function(){console.log(arguments.length);}})

點擊網址 - stackoverflow.com/?_=1295906023724 &先令=鮑勃&頌歌=頌歌

(這是轉向了額外的參數是jQuery的增加,以防止響應被緩存時間戳)

所以我估計如果你改變你的代碼到下面它應該會給你預期的提醒 -

$.ajax({ 
    type: "GET", 
    url: "ajaxValidate.php", 
    data: {email: fval1.val()), user:fval2.val()}, 
    success: function(msg){ 
    alert(fval1.val()); 
    alert(msg); 
    } 
}); 

可能值得注意的是,成功回調函數中的代碼將在未來某個時間點運行,而不是在代碼中依次運行。這意味着,你很可能將不得不返工您的驗證碼爲形式的東西 -

  "Create an account": function() { 
       var bValid = true; 
       allFields.removeClass("ui-state-error"); 

       bValid = bValid && checkLength(name, "username", 3, 16); 
       bValid = bValid && checkLength(email, "email", 6, 80); 
       bValid = bValid && checkLength(password, "password", 5, 16); 


       bValid = bValid && checkRegexp(name, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter."); 
       // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/ 
       bValid = bValid && checkRegexp(email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. [email protected]"); 
       bValid = bValid && checkRegexp(password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9"); 
       var $this = $(this); 
       $.ajax({ 
        type: "GET", 
        url: "ajaxValidate.php", 
        data: "?email="+escape(fval1.val())+"&user="+escape(fval2.val()), 
        success: function(msg){ 
        $("#users tbody").append("<tr>" + 
         "<td>" + name.val() + "</td>" + 
         "<td>" + email.val() + "</td>" + 
         "<td>" + password.val() + "</td>" + 
        "</tr>"); 

        document.forms["regform"].submit(); 
        $this.dialog("close"); 
        }, 
       }); 
      }, 

我從來沒有使用該對話框的東西之前,所以我不知道什麼插件期待的功能返回等,但你會想要一個更像這樣的結構來支持異步調用。

希望幫助,

克里斯

0

您的ajaxValidate函數不會顯式返回任何內容,因此它隱式返回undefined,然後將其轉換爲布爾值false。

爲了能夠從函數返回驗證狀態,您應該同步調用服務器端驗證程序。查看有關製作ajax請求的jQuery docs,您需要將async屬性設置爲false。