從SJAX到AJAX

Question

我期待在AJAX中轉換我的腳本的一部分，因爲它不會像Synchronous JAX那樣凍結頁面。我想要實現的是在將密碼發送到服務器之前驗證密碼是否正確。如果不是，密碼字段將抖動並顯示錯誤消息。

<script type="text/javascript"> 
    var ok = null; 
    var lastChanged = ""; 
     $(document).ready(function() { 
      $.localScroll({duration:800}); 
      <?php if ($wrong_pass): ?> 
       $("form#password_box").velocity("callout.shake"); 
      <?php endif; ?> 
      $("[name=pass]").on("keyup change propertychange", onPassChange); 
     }); 
    </script> 
    <script type="text/javascript"> 
     function onPassChange(e) { 
      // get keycode of current keypress event 
      var code = (e.keyCode || e.which); 
      // do nothing if it's the enter key 
      if(code != 13) { 
       var init_val = $("#password_field").val(); 
       $.ajax({type: "POST", url:"check_password_AJAX", data:{pass:$("#password_field").val()}, dataType:"text", success: function (data) { 
        if (data && $("#password_field").val() == init_val) { 
         if (data == "TRUE") { 
          ok = true; 
          lastChanged = init_val; 
         }else { 
          ok = false; 
          lastChanged = init_val; 
         } 
        } 
       }}); 
      } 
     } 
    </script> 
    <script type="text/javascript"> 
     function validateForm() { 
      if (ok && lastChanged == $("#password_field").val()) { 
       $("#incorrect").velocity("transition.fadeOut"); 
       $("#incorrect").html(""); 
       return true; 
      }else if (lastChanged != $("#password_field").val()) { 
       //ajax 
       var obj = $.ajax({type: "POST", url:"check_password_AJAX", data:{pass:$("#password_field").val()}, dataType:"text", async:false}); 
       // Analyse 
       if (obj.responseText) { 
        if (obj.responseText == "TRUE") { 
         $("#incorrect").velocity("transition.fadeOut"); 
         $("#incorrect").html(""); 
         return true; 
        }else { 
         $("#password_container").velocity("callout.shake"); 
         $("#incorrect").html("Mot de passe incorrect"); 
         $("#incorrect").velocity("transition.fadeIn"); 
         $("#password_field").val(""); 
         return false; 
        } 
       } 
      }else { 
       $("#password_container").velocity("callout.shake"); 
       $("#incorrect").html("Mot de passe incorrect"); 
       $("#incorrect").velocity("transition.fadeIn"); 
       $("#password_field").val(""); 
       return false; 
      } 
     } 
</script> 
<form action="cmd" method="post" class="center" id="password_box" onsubmit="return validateForm()"> 
            <div id="password_container"> 
             <input type="password" name="pass" id="password_field" placeholder="Mot de passe"><br> 
            </div> 
            <input type="submit" name="submit" class="button" value="S'autentifier"> 
          </form> 

對於每一個按鍵，我去嘗試驗證使用AJAX（onPassChange功能）的密碼，並把結果在ok變量。如果用戶在使用AJAX驗證之前嘗試提交表單，我發現的唯一方法是使用SJAX。謝謝。

Answer 1

我想你誤解了AJAX的用法。 AJAX用於執行異步HTTP（Ajax）請求。在客戶端驗證（我假設你的意思是正確的格式，並且不是正確的密碼）不應該使用AJAX完成。將用戶名和密碼發送到後端服務器可以使用AJAX完成，因爲它是HTTP請求。如果您在用戶輸入文本時嘗試檢查密碼是否正確，我會有興趣瞭解該方法適合的用例。

編輯：我做了快速和簡單的小提琴來演示在客戶端上進行密碼格式驗證。注意onPassChange函數中的更改以及在id爲passwordInvalid的html中添加元素。該通知僅消失如果「格式」是密碼https://jsfiddle.net/032mn56t/19/

function onPassChange(e) { 
    // get keycode of current keypress event 
    var code = (e.keyCode || e.which); 
    console.log(code); 
    // do nothing if it's the enter key 
    if(code != 13) { 
     var init_val = $("#password_field").val(); 
     //substitute the following with matching input to a regex meething your password requirements. THis is just for demonstration. 
     if(init_val !== "format"){ 
      $("#passwordInvalid").show(); 
     }else{ 
      $("#passwordInvalid").hide(); 
     } 
    } 
<form action="cmd" method="post" class="center" id="password_box" onsubmit="return validateForm()"> 
    <div id="password_container"> 
     <input type="password" name="pass" id="password_field" placeholder="Mot de passe"><br> 
    </div> 
     <input type="submit" name="submit" class="button" value="S'autentifier"> 
</form> 
<p id="passwordInvalid" style="display:none"> 
    WRONG PASSWORD FORMAT 
</p>