Question

尝试制作一个非常简单的登录示例我需要添加3次登录授权检查过程。如果用户输入的错误登录信息超过3次，则会弹出.bye类！你能告诉我怎么做吗？

以下是Demo：

和代码

<form id="target" action="">User Name:
    <input type="text" id="user" name="user" />
    <br />Password :
    <input type="text" id="pass" name="pass" />
    <br />
    <input type="submit" value="Login" />
</form>
<p class="error">Login Failed</p>
<p class="correct"></p>
<p class="bye">You Have To Go!</p>

$(document).ready(function () {
    var users = ["user1", "user2", "user3"];
    var passes = ["Pass1", "Pass1", "Pass1"];
    $("#user, #pass ").on("click",function(){
   $(".error").slideUp()
});
    $("#target").submit(function (event) {
        var user = $("#user").val();
        var pass = $("#pass").val();
        correctUser = $.inArray(user, users);
        correctPass = $.inArray(pass, passes);
        if (correctUser == 0 || correctPass == 0) {
            $(".error").slideUp();
            $(".correct").html("Welcomw " + user).slideDown();
            $("#user").val('');
            $("#pass").val('');
        } else {
            $(".error").slideDown();
            $("#user").val('');
            $("#pass").val('');
        }
        event.preventDefault();
    });
});

由于

Answer 1

您可以拥有一个全局count变量，并且每次尝试登录时都只是煽动它。然后在else条件中添加以下代码以检查尝试次数。

else {
            count++;
            if(count<=3){
                $(".error").slideDown();
                $("#user").val('');
                $("#pass").val('');
            }
            else{
            $(".error").slideUp();
                $("#user").val('');
                $("#pass").val('');
                $(".bye").slideDown();
               $('input[type="submit"]').prop('disabled',true);
            }
        }

这是更新的jsfiddle。

PS：永远不要只依赖客户端javascript验证（并在服务器端进行适当的检查），因为它总是可以被打败

Answer 2

http://jsfiddle.net/ZEb4a/5/

我的小提琴包含一些额外的修正，我将逐步解释它。

if (correctUser === 0 && correctPass === 0) {
//do something
}

||运算符是OR operator，它的使用方式意味着无论你写的是什么，只要密码或用户名是正确的。另一件事是==它评估两个值是否相同，这里有一个问题，它只检查值，它不关心类型。

要检查它是否也是正确的类型（I.E有人可以将正确的用户设置为“0”并且它可以工作）必须使用===运算符。更多here。

即使我们纠正了这个小问题，问题仍然存在，客户端可能会选择说变量correctPass应为= 0然后我们的检查失败，为了解决这个问题，你需要在服务器上检查它但这是一个不同的问题。

要记住的其他事项是客户端的值可以更改，因此即使客户端锁定自己，他也只是刷新并且他将获得3次新的尝试，或者他可以简单地操纵全局计数或times值可以获得几乎无限制的登录尝试（他或她理论上可以将值设置为-9999999）。

如何添加登录尝试计数到jQuery登录

2 个答案: