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

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

我正在做一个ATM项目，我在它的登录部分。我有两个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>

// 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页面。您必须在登录开始时检查限制。

这是我的解决方案，效果很好，希望能帮助到别人。

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"
} 
}
}

您只需要如下修改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即可使其工作。

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

相关内容

最新更新

热门标签：