javascript - 使用 Ajax/JQuery 检查用户输入的原始密码

Question

我希望允许用户在“更改密码”页面上输入原始密码，并让页面在不刷新的情况下检查密码是否正确。我希望当密码正确时，文本框旁边会出现一个复选框图像。

不过，我有两个问题。 1) 如何以安全的方式完成此操作，2) 每次按键时触发 ajax 调用似乎并不总能捕获每次按键。

这是我到目前为止所拥有的:

$("#oldPW").keyup(function () {
    checkPW();
});

// on keyup
function checkPW() {
    var pw = $("#oldPW").val();
    var dataSring = "pw=" + pw;
    $.ajax({
        type: "POST",
        url: "checkPW",
        data: dataSring,
        cache: false,
        success: function (data) {
            if (data== "True") {
                $("#pwok").fadeIn();
            }
            if (data== "false") {
                $("#pwok").fadeOut();
            }
        }
    });
}

我发现上述代码的问题在于用户可以手动显示图像，这将绕过上述“安全性”。我可以在用户按下提交后再次检查，但这并不能解决问题 1，缺少按键，而且我不确定它在安全性方面是否万无一失。

Answer 1

对于问题 #1，无论如何，您都需要在服务器端验证密码。这样，您就不必担心有人绕过客户端。

对于#2，问题是您不知道 ajax 调用将以什么顺序完成，因此先前的调用可能会在最新的调用之后完成。您可以通过多种方式处理此问题，但其中一种是每次重试时中止请求:

$("#oldPW").data('lastRequest', {abort: function () {}});

function checkPW() {
    var pw = $("#oldPW").val();
    var dataSring = "pw=" + pw;
    $("#oldPW").data('lastRequest').abort();
    $("#oldPW").data('lastRequest', $.ajax({