JS登录循环逻辑问题求助：3次错误后锁定功能异常

需求与问题 #

我刚开始学习JS，编写登录验证循环逻辑时遇到问题。想要实现：输入错误密码1-2次后可重试，3次错误后锁定；输入正确则进入站点，但当前代码始终出现两种异常情况之一：

• 输入账号密码后，循环提示剩余尝试次数，之后无限弹出“You have no more atempts”提示
• 输入账号密码后，每次提示剩余尝试次数后都重新要求输入账号密码，3次后无限弹出“You have no more atempts”提示

原代码 #

var database = [
    {
        username: "refael",
        password: "123456"
    },
    {
        username: "boby",
        password: "ilovepizza"
    },
    {
        username: "sally",
        password: "123"
    }
];

var newsfeed = [
    {
        username: "bob",
        timeline: "i love pizza"
    },
    {
        username: "andy",
        timeline: "im at the pool!"
    }
];

function isUserValide(username, password){
    for (var i=0; i < database.length; i++){
        if (database[i].username === username && 
            database[i].password === password) {
            return true;
        }
    }
    return false;
}

function singin(username, password) {
    for (var atempts = 2; atempts >= 0; atempts--) {
        if (isUserValide(username, password)) {
            console.log(newsfeed);
            alert("SuccessFully Logged In");
            return true;
        } else if (atempts==0) {
            for (var i = 3; i >= 0;) {
                alert("Too many atempts");
            }
        } else {
            alert("You have "+atempts+" atempts left")
            var usernameprompt = prompt("Enter your username")
            var passwordprompt = prompt("Enter your password")
            isUserValide(username, password)
        }
    }
}

var usernameprompt = prompt("Enter your username")
var passwordprompt = prompt("Enter your password")

singin(usernameprompt, passwordprompt);

问题分析 #

1. 无限循环提示锁定信息：当尝试次数用完时，代码里写了一个无终止条件的for (var i = 3; i >= 0;)循环，i值永远不变，导致无限弹出"Too many atempts"。
2. 重试时未更新验证参数：重试时重新弹出输入框获取了新账号密码，但没把新值赋值给函数内的username和password变量，每次验证仍用最初的错误值，一直失败。
3. 尝试次数逻辑混乱：初始atempts设为2，循环条件atempts >= 0会执行3次循环，但提示的剩余次数和实际可尝试次数不匹配，且重试时未重新判断验证结果。

修复后的代码 #

var database = [
    {
        username: "refael",
        password: "123456"
    },
    {
        username: "boby",
        password: "ilovepizza"
    },
    {
        username: "sally",
        password: "123"
    }
];

var newsfeed = [
    {
        username: "bob",
        timeline: "i love pizza"
    },
    {
        username: "andy",
        timeline: "im at the pool!"
    }
];

function isUserValide(username, password){
    for (var i=0; i < database.length; i++){
        if (database[i].username === username && 
            database[i].password === password) {
            return true;
        }
    }
    return false;
}

function singin() {
    // 总共有3次尝试机会，初始剩余2次重试机会
    var remainingAttempts = 2;
    while (remainingAttempts >= 0) {
        var username = prompt("Enter your username");
        var password = prompt("Enter your password");
        
        if (isUserValide(username, password)) {
            console.log(newsfeed);
            alert("SuccessFully Logged In");
            return true;
        } else {
            if (remainingAttempts === 0) {
                alert("Too many attempts, account locked");
                return false;
            } else {
                alert(`You have ${remainingAttempts} attempts left`);
                remainingAttempts--;
            }
        }
    }
}

// 直接调用登录函数，无需提前传参
singin();

修复说明 #

1. 重构循环逻辑：改用while循环更直观控制尝试次数，把账号密码输入移到循环内部，每次重试都重新获取新输入值。
2. 移除无限循环：剩余尝试次数为0时，只弹出一次锁定提示后返回，避免无限循环。
3. 修正次数计数：初始剩余重试次数设为2（对应总3次尝试），每次验证失败后递减，提示信息和实际剩余次数匹配。
4. 简化函数调用：登录函数不再需要提前传参，内部直接处理输入和验证流程，逻辑更清晰。

内容的提问来源于stack exchange，提问作者ref hal