在编写登录代码时，我想设置一个限制，只允许您在重置之前尝试 3 次

Question

免责声明：一些代码是西班牙语，如果您需要英语，请告诉我，我也不知道如何添加第二个 HTML（如果相关请加上 IDK）请告诉我如果你也需要，我可以更改它。

我正在做一个 ATM 项目，我在它的登录部分。我有 2 HTML 个页面，第一个是登录，第二个是 ATM（忽略那部分，因为还没有完成）

我想做的事情：

如果它验证登录，它将引导您到 .html 页面以在 ATM
如果信息有误，它会再给你 2 次尝试，在最后一次尝试后它会告诉你运行次，然后会重新开始计数并将你重定向到第一页。（这是我现在需要帮助的部分）

// Variables para limite de intentos
let entryCount = 0
let entryLimit = 3
let error = false

// Variables para cambio de pagina
let mainScreen = document.getElementById('mainScreen')
let contentAccountScreen = document.createTextNode("Account Screen")
let accountScreen = document.createElement("span").setAttribute("id","accountScreen")

// Login 1
function login() {
    let response
    user = document.getElementById('user')
    pass = document.getElementById('password')
    if (user.value === 'Emilio' && pass.value === "abc123"){
        changeMainScreen.replaceChild(contentAccountScreen, mainScreen)
    } if (response != pass && entryCount < entryLimit) {
        entryCount++;
        alert('Contraseña o usuario invalido, intentelo nuevamente')
        window.location.href = "index.html"
    } else(entryCount<entryLimit)
    {
        alert('Pasaste el limite de intentos')
        window.location.href = "index.html"
    } 
}

.cuerpo{
    display: flex;
    background-color: #dad158;
    align-items: center;
    width: 100vw;
    height: 100vh;
}

.boton{
    margin-top: 1rem;
}

h1 {
    text-align: center;
    margin-bottom: 100px;
}


/* Estilos calculadora */
body{
    font-size: 18px;
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
}
#contenedor {
    max-width: 1024px;
    margin: 0 auto;
}
.cajacentro {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 12% auto !important;
    width: 450px;
    height: 100%;
    background-color: #212121;
    padding:3%;
}
section header h5, section header h2, aside h4, aside p{
    color: #ffffff;
    margin: 10px 0;
    text-align: right;
}
.tamañoresultados{
    font-size: 0.6rem;
}
.columna1{
    height: 100%;
    width: 65%;
}
.columna2{
    height: 100%;
    width: 25%;
}
.gridbotones{
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr 1fr; 
    grid-template-rows: 1fr 1fr 1fr 1fr; 
    gap: 0px 0px; 
    grid-template-areas: 
        ". . . ."
        ". . . ."
        ". . . ."
        ". . . ."; 
}
button{
    background-color: #212121;
    color: #ffffff;
    border: 1px solid #ffffff;
    padding: 10px 0;
    cursor: pointer;
}
button:hover{
    background-color: #424242;
}

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="css/styles.css">

    <script src="js/script.js"></script>
    <title>ATM</title>
</head>
<body class="cuerpo">
    <div class="container">
        <div id="mainScreen" class="abs-center"></div>
        <h1>ATM</h1>
        <div class="form-floating mb-3">
            <input type="" class="form-control" id="user" placeholder="username">
            <label for="floatingInput">Usuario</label>
        </div>
        <div class="form-floating">
            <input type="password" class="form-control" id="password" placeholder="Password">
            <label for="floatingPassword">Contraseña</label>
        </div>
        <div class="boton">
            <button type="submit" class="btn btn-outline-success" onclick="login(location.href='cajero.html')">Ingresar</button>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</body>
</html>

Answer 1

你只需要稍微修改一下js如下：

// Variables para limite de intentos
let entryCount = 0
let entryLimit = 3
let error = false

// Variables para cambio de pagina
let mainScreen = document.getElementById('mainScreen')
let contentAccountScreen = document.createTextNode("Account Screen")
let accountScreen = document.createElement("span").setAttribute("id","accountScreen")

// Login 1
function login() {
    let response
    user = document.getElementById('user')
    pass = document.getElementById('password')
    if (user.value === 'Emilio' && pass.value === "abc123"){
        changeMainScreen.replaceChild(contentAccountScreen, mainScreen)
    } if (response != pass && entryCount < entryLimit) {
        entryCount++;
        alert('Contraseña o usuario invalido, intentelo nuevamente')
        window.location.href = "index.html"
    } else(entryCount >= entryLimit)
    {
        alert('Pasaste el limite de intentos')
        window.location.href = "index.html"
    } 
}

您只需添加 entryCount >= entryLimit 即可使用。

只是一个建议，永远不要相信 client-side 验证，即只需在控制台中输入 entryLimit = 100000 即可轻松尝试无限次。

Answer 2

// Login 1
function login() {
    if (entryCount >= entryLimit) {
        alert('You reached the limit');
        return;
    }

    // login process..
    // if login validated redirect to html
    // window.location.href = "index.html";

    entryCount++;

    if (entryCount < entryLimit) {
        alert('Try again');
    }
}

您不应在增加计数后重定向到 html 页面。您必须在开始登录时检查限制。

Answer 3

This was my solution and worked like a charm, hope it helps somebody.

function login() {
    let response
    user = document.getElementById('user')
    pass = document.getElementById('password')
    bal = 1000
    if (user.value === 'Emilio' && pass.value === "abc123"){
        window.location.href = "cajero.html"
        
    } else{
        if (entryCount < entryLimit) {
        entryCount++;
        alert('Contraseña o usuario invalido, intentelo nuevamente')
    } else {
        alert('Pasaste el limite de intentos')
        window.location.href = "index.html"
        } 
    }
    }

在编写登录代码时，我想设置一个限制，只允许您在重置之前尝试 3 次

While coding a login I want to set a limit to just allow you to try 3 times before resetting it

html

javascript

authentication

validation