Javascript 从SJAX到AJAX

我希望在AJAX中转换脚本的一部分，使其不会像同步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>

var-ok=null；
var lastChanged=“”；
$（文档）.ready（函数（）{
$.localScroll（{duration:800}）；
$（“表格#密码箱”）.velocity（“callout.shake”）；
$（“[name=pass]”）on（“键控更改属性更改”，onPassChange）；
});
函数onPassChange（e）{
//获取当前按键事件的按键代码
var代码=（e.keyCode | | e.which）；
//如果是回车键，则不执行任何操作
如果（代码！=13）{
var init_val=$（“#密码_字段”）.val（）；
$.ajax（{type:“POST”，url:“check_password_ajax”，数据：{pass:$（“#password_field”）.val（）}，数据类型：“text”，成功：函数（数据）{
if（data&&$（“#password_field”）.val（）==init_val）{
如果（数据==“真”）{
ok=正确；
lastChanged=init_val；
}否则{
ok=假；
lastChanged=init_val；
}
}
}});
}
}
函数validateForm（）{
if（ok&&lastChanged==$（“#密码_字段”）.val（）{
$（“#不正确”）.velocity（“transition.fadeOut”）；
$（“#不正确”）.html（“”）；
返回true；
}else if（lastChanged！=$（“#密码_字段”）.val（）{
//阿贾克斯
var obj=$.ajax（{type:“POST”，url:“check_password_ajax”，数据：{pass:$（“#password_field”）.val（）}，数据类型：“text”，异步：false}）；
//分析
if（对象响应文本）{
如果（obj.responseText==“TRUE”）{
$（“#不正确”）.velocity（“transition.fadeOut”）；
$（“#不正确”）.html（“”）；
返回true；
}否则{
$（“#密码_容器”）.velocity（“callout.shake”）；
$（“#不正确”）.html（“不正确的通行证”）；
$（“#不正确”）.velocity（“transition.fadeIn”）；
$（“#密码_字段”）.val（“”）；
返回false；
}
}
}否则{
$（“#密码_容器”）.velocity（“callout.shake”）；
$（“#不正确”）.html（“不正确的通行证”）；
$（“#不正确”）.velocity（“transition.fadeIn”）；
$（“#密码_字段”）.val（“”）；
返回false；
}
}

---

对于每次按键，我都会尝试使用AJAX（

onPassChange

函数）验证密码，并将结果放入

ok

变量中。如果用户在我使用AJAX验证表单之前尝试提交表单，我发现唯一的解决方法就是使用SJAX。谢谢。

我想你误解了AJAX的用法。AJAX用于执行异步HTTP（AJAX）请求。客户端的验证（我假设您指的是正确的格式和不正确的密码）不应该使用AJAX完成。可以使用AJAX将用户名和密码发送到后端服务器，因为这是一个HTTP请求。如果您试图在用户输入文本时检查正确的密码，我想知道这种方法适合什么用例

编辑：我制作了一个快速简单的小提琴来演示如何在客户端上进行密码格式验证。请注意onPassChange函数中的更改以及在html中添加的id为passwordInvalid的元素。只有当“格式”是密码时，通知才会消失

函数onPassChange（e）{
//获取当前按键事件的按键代码
var代码=（e.keyCode | | e.which）；
控制台日志（代码）；
//如果是回车键，则不执行任何操作
如果（代码！=13）{
var init_val=$（“#密码_字段”）.val（）；
//将以下内容替换为符合密码要求的正则表达式的匹配输入。这只是为了演示。
如果（初始值！=“格式”）{
$（“#passwordInvalid”）.show（）；
}否则{
$（“#passwordInvalid”）.hide（）；
}
}



错误的密码格式

我知道AJAX不应该用于客户端验证，所以我也有一个服务器端验证。我使用AJAX的原因是为了快速向用户反馈密码的有效性。在将AJAX添加到混合中之前，我刚刚进行了PHP验证，但我发现让看到页面重新加载的用户感到困惑，然后显示相同的提示（文本字段）。使用一些简单的代码更新了答案，以演示如何在客户端进行验证。如果您对使用框架进行客户端验证感兴趣，请查看jQuery验证插件。

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>