免責宣告：有些代碼是西班牙語，如果你需要英文，請告訴我，我也不知道如何添加第二個 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/[email protected]/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/[email protected]/dist/umd/popper.min.js" integrity="sha384-7 zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG 2QOK9T ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</body>
</html>uj5u.com熱心網友回復：
// 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 頁面。您必須在登錄開始時檢查限制。
uj5u.com熱心網友回復：
這是我的解決方案，就像一個魅力，希望它可以幫助別人。
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"
}
}
}
uj5u.com熱心網友回復：
你只需要稍微修改一下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控制臺即可輕松嘗試無限次。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/424360.html
標籤：javascript html 验证 验证
上一篇：當在passport.js登錄周期中創建完全丟失憑據錯誤時
下一篇：按鈕型別提交-如何首先驗證