使用ajax post實時驗證用戶名和電子郵件地址

我設置了一個簡單的表單並使用ajax + jquery來檢查有效用戶名（不存在於數據庫中）和電子郵件地址（有效格式並且不存在於DB）如下使用ajax post實時驗證用戶名和電子郵件地址

<body> 
<div> 
<h5> Sign Up </h5> 
<hr /> 
<div> 
    Username:<input type="text" size="32" name="membername" id="username"><div id="usernameStatus"></div><br /> 
    Email:<input type="text" size="32" name="memberemail" id="memberemail"><div id="emailStatus"></div><br/> 
    Password:<input type="password" size="32" name="memberpwd"><br /> 
    <button id="signup" disabled="true">Sign Up</button> 
</div> 
<script>  
    function IsEmailValidAndNew() 
    { 
     var pattern = new RegExp(/^(("[\w-+\s]+")|([\w-+]+(?:\.[\w-+]+)*)|("[\w-+\s]+")([\w-+]+(?:\.[\w-+]+)*))(@((?:[\w-+]+\.)*\w[\w-+]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][\d]\.|1[\d]{2}\.| 

[\d]{1,2}\.))((25[0-5]|2[0-4][\d]|1[\d]{2}|[\d]{1,2})\.){2}(25[0-5]|2[0-4][\d]|1[\d]{2}|[\d]{1,2})\]?$)/i); 
     var success=false; 
     $("#memberemail").change(function() 
     { 
      var email=$("#memberemail").val(); 
      success=patter.test(email); 
      if(success) 
      { 
       $("#usernameStatus").html('<img align="absmiddle" src="loading.gif"/> Checking email...'); 
       $.ajax(
       { 
        type: "POST", 
        url:"regcheckemail.php", 
        data:"memberemail="+email, 
        success: function(msg) 
        { 
         $("#emailStatus").ajaxComplete(function(event, request, settings) 
         { 
          if(msg=="OK") 
          { 
           $("#memberemail").removeClass("object_error"); 
           $("#memberemail").addClass("object_ok"); 
           $(this).html('<img align="absmiddle" src="checkmark.png"/>'); 
           success=true; 
          } 
          else 
          { 
           $("#memberemail").removeClass('object_ok'); 
           $("#memberemail").addClass("object_error"); 
           $(this).html(msg); 
           success=false; 
          } 
         } 
         ); 
        } 
       } 
       ); 
      } 
      else 
      { 
       $("#emailStatus").html("Provided email address is ill-formed"); 
       $("#memberemail").removeClass('object_ok'); // if necessary 
       $("#memberemail").addClass("object_error"); 
       success=false; 
      } 
     } 
     ); 
     return success; 
    } 

    function IsUserAlreadyExist() 
    { 
     var success=false; 
     $("#username").change(function() 
     { 
      var usr=$("#username").val(); 
      if(usr.length>=7) 
      { 
       $("#usernameStatus").html('<img align="absmiddle" src="loading.gif"/> Checking availability...'); 
       $.ajax(
       { 
        type: "POST", 
        url:"regcheckuser.php", 
        data:"username="+usr, 
        success: function(msg) 
        { 
         $("#usernameStatus").ajaxComplete(function(event, request, settings) 
         { 
          if(msg=="OK") 
          { 
           $("#username").removeClass("object_error"); 
           $("#username").addClass("object_ok"); 
           $(this).html('<img align="absmiddle" src="checkmark.png"/>'); 
           success=true; 
          } 
          else 
          { 
           $("#username").removeClass('object_ok'); 
           $("#username").addClass("object_error"); 
           $(this).html(msg); 
           success=false; 
          } 
         } 
         ); 
        } 
       } 
       ); 
      } 
      else 
      { 
       $("#usernameStatus").html("The username should have at least 7 characters"); 
       $("#username").removeClass('object_ok'); 
       $("#username").addClass("object_error"); 
       success=false; 
      } 
     }); 
     return success; 
    } 
    $(document).ready(function() 
    {  
     if(IsEmailValidAndNew() && IsUserAlreadyExist()) 
     { 
      $('button').find("#signup").attr("disabled","false"); 
     } 
     else 
     { 
      $('button').find("#signup").attr("disabled","true");  
     }   
    }); 
</script> 
</div> 
</body>

我用記事本編寫它，它不工作，我無法找出錯誤。我不知道你可能會用什麼好的工具來編寫JavaScript代碼，這些工具有非常棒的選項，比如嵌入式智能感知和調試功能。

來源

2012-01-28 Mackintoast

關於Javascript調試我強烈建議您使用FireFox web瀏覽器的FireBug插件。通過添加一些'console.log（「message」）'，您可以在插件提供的控制檯中跟蹤腳本的流程！ https://addons.mozilla.org/en-US/firefox/addon/firebug/ – yoshi 2012-01-28 03:52:25

在哪裏？我們可以假設你已經包含了jQuery庫文件嗎？ – cosmorogers 2012-01-28 03:54:39

進一步yoshi說，如果你碰巧已經使用Chrome瀏覽器，它有內置的調試工具。 – nnnnnn 2012-01-28 04:23:32

您的代碼有幾個問題。

您的電子郵件正則表達式不夠徹底（確定，這實際上並沒有停止代碼工作，但這是我首先注意到的）。
你的Ajax調用異步，這是很好的，但意味着做$.ajax()調用函數將完成接收到Ajax響應之前。你需要重構這個以從ajax成功回調中執行某些操作。

你不需要ajaxComplete()函數 - 你已經在這個點上的ajax成功處理程序，所以把代碼放在當前的ajaxComplete()直接在包含成功函數。

您從文檔中調用IsEmailValidAndNew()和IsUserAlreadyExist()一次準備好並禁用或啓用「註冊」控件，但在此之後的任何時候您都不能重新啓用或重新禁用它。您正在調用這些函數，就好像它們將驗證字段一樣，但實際上他們所做的是在字段上設置更改處理程序，以便函數中的代碼在用戶更改字段之前不會執行任何操作。

以下是你可以組織你的代碼，而不是一個辦法：

$(document).ready(function() { var emailOK = false, nameOK = false; function setSubmitEnabling() { $("#signup").prop("disabled", !(emailOK && nameOK)); } setSubmitEnabling(); $("#username").change(function() { var usr = $(this).val(); if (usr.length < 7) { $("#usernameStatus").html("The username should have at least 7 characters"); $(this).removeClass('object_ok').addClass("object_error"); nameOK = false; setSubmitEnabling(); } else { // format seems OK, so do ajax call: $("#usernameStatus").html('<img align="absmiddle" src="loading.gif"/> Checking availability...'); $.ajax({ type: "POST", url:"regcheckuser.php", data:"username="+usr, success : function(msg) { if(msg === "OK") { $("#username").removeClass("object_error") .addClass("object_ok"); $("#usernameStatus").html('<img align="absmiddle" src="checkmark.png"/>'); nameOK = true; } else { $("#username").removeClass('object_ok') .addClass("object_error"); $("#usernameStatus").html(msg); nameOK = false; } // now update button state setSubmitEnabling(); } }); } }); $("#memberemail").change(function() { // basically the same thing as for the username field as shown above, // except setting emailOK instead of nameOK, so I suggest you get the // username part working first then come back to do this the same way }); });

上述代碼的想法是，有些情況下，你需要啓用或禁用「註冊」按鈕幾個點，這取決於兩個無關的條件。因此，爲每個條件創建一個標誌，並且功能setSubmitEnabling()檢查標誌並啓用或禁用按鈕。當頁面加載時立即調用該函數以設置初始啓用/禁用狀態，並且在需要重新評估啓用/禁用狀態的任何變化時，再次調用該函數。

另外，爲每個字段創建一個更改處理程序。變更處理程序將相似，基本上做一些初步的快速驗證，以查看長度和格式是否正常，如果是，則調用ajax來測試唯一性。

來源

2012-01-28 04:22:16 nnnnnn

使用ajax post實時驗證用戶名和電子郵件地址

回答

相關問題