javascript「if」語句在兩個值相等時返回false值

Question

我正在嘗試一個HTML/JS登錄系統（這只是一種學習體驗，不能用於真實案例）有一條if語句應該在有人輸入正確的用戶名和密碼時返回true，但返回false，我找不到原因。 這裏是我使用的代碼：

var count = 2; 
 

 
function validate() { 
 
    var un = document.login.username.value; 
 
    var pw = document.login.password.value; 
 
    var valid = false; 
 
    var usernameArray = ["Adam", "Adam2"]; 
 
    var passwordArray = ["12345", "54321"]; 
 
    for (var i = 0; i < usernameArray.length; i++) { 
 
    if ((un == usernameArray[i]) && (pw == passwordArray[i])) { 
 
     valid = true; 
 
     break; 
 
    } 
 
    if (valid) { 
 
     alert("Logging in..."); 
 
     window.location.href = "http://www.google.com"; 
 
     return false; 
 
    } 
 
    var again = " tries"; 
 
    if (count == 1) { 
 
     again = " try"; 
 
    } 
 
    if (count >= 1) { 
 
     alert("Username and password do not match."); 
 
     count--; 
 
    } else { 
 
     alert("Username and password do not match. You are now blocked.") 
 
     document.login.username.value = "You are now blocked"; 
 
     document.login.password.value = "You can not see this"; 
 
     document.login.username.disabled = true; 
 
     document.login.password.disabled = true; 
 
     return false; 
 
    } 
 
    } 
 
}

<div class="container"> 
 
    <div class="header"> 
 
    <h1>Login Page</h1> 
 
    </div> 
 

 
    <form name="login" onsubmit="return validateForm();" method="post"> 
 

 
    <ul> 
 
     <li>Username: 
 
     <input class="username" type="text" name="username"> 
 
     </li> 
 

 
     <li>Password: 
 
     <input class="password" type="password" name="password"> 
 
     </li> 
 
    </ul> 
 

 
    <input type="button" class="submit" value="Login" name="submit" onclick="validate()"> 
 
    </form> 
 
</div>

Answer 1

您正在打破循環，並且您的if(valid)代碼位於for循環內。您可能打算在for循環範圍之外有if(valid)。

例如，你可以這樣做：

valid = false; 

for (var i = 0; i < usernameArray.length; i++) { 
    if ((un == usernameArray[i]) && (pw == passwordArray[i])) { 
     valid = true; 
     break; 
    } 
} 

if (valid) { 
    alert("Logging in..."); 
    window.location.href = "http://www.google.com"; 
    return false; 
} 

通知我關閉了for循環。

另請注意，在if聲明後面有一個valid=true。我假設你是爲了調試目的而做的，但一定要刪除它。

Answer 2

這是落實在客戶端的JavaScript登錄一個非常糟糕的主意。任何人都能看到你的密碼。

這就是說，你的問題是你一找到匹配的用戶名和密碼就退出循環。所以你的if語句永遠不會被達到。

Answer 3

它在你的for循環。有效憑證檢查後的邏輯位於錯誤的地方，它應該在for循環之外。

var count = 2; 
 

 
function validate() { 
 
    var un = document.login.username.value; 
 
    var pw = document.login.password.value; 
 

 
    var valid = false; 
 
    var usernameArray = ["Adam", "Adam2"]; 
 
    var passwordArray = ["12345", "54321"]; 
 
    for (var i = 0; i < usernameArray.length; i++) { 
 
    if ((un == usernameArray[i]) && (pw == passwordArray[i])) { 
 
     valid = true; 
 
     break; 
 
    } 
 
    } 
 

 
    if (valid) { 
 
    alert("Logging in..."); 
 
    window.location.href = "http://www.google.com"; 
 
    return false; 
 
    } 
 
    var again = " tries"; 
 
    if (count == 1) { 
 
    again = " try"; 
 
    } 
 
    if (count >= 1) { 
 
    alert("Username and password do not match."); 
 
    count--; 
 
    } else { 
 
    alert("Username and password do not match. You are now blocked.") 
 
    document.login.username.value = "You are now blocked"; 
 
    document.login.password.value = "You can not see this"; 
 
    document.login.username.disabled = true; 
 
    document.login.password.disabled = true; 
 
    return false; 
 

 
    } 
 
}

<div class="container"> 
 
    <div class="header"> 
 
    <h1>Login Page</h1> 
 
    </div> 
 

 
    <form name="login" onsubmit="return validateForm();" method="post"> 
 

 
    <ul> 
 
     <li>Username: 
 
     <input class="username" type="text" name="username"> 
 
     </li> 
 

 
     <li>Password: 
 
     <input class="password" type="password" name="password"> 
 
     </li> 
 
    </ul> 
 

 
    <input type="button" class="submit" value="Login" name="submit" onclick="validate()"> 
 
    </form> 
 
</div>