我如何檢查給定的用戶名和密碼是否是用戶輸入的內容並提示成功或失敗？ HTML 和 JS

Question

如標題所述，我如何檢查給定的用戶名和密碼是否是用戶輸入的內容並提示成功或失敗？ 警報不再彈出。我將 js 腳本嵌入到 html 文件中。

這是腳本：

        function login() {
            var username = ["user1", "user2", "user3"];
            var password = ["1", "2", "3"];
            var idInput = document.getElementById("id");
            var pwInput = document.getElementById("pw");
            if (username[0] == idInput) {
                if (password[0] == pwInput) {
                    alert("login success!");
                } else if (username[1] == idInput) {
                    if (password[1] == pwInput) {
                        alert("login success!");    
                    } else if (username[2] == idInput) {
                        if (password[2] == pwInput) {
                            alert("login success!");                            
                        } else { 
                            alert("please try again"); 
                        }
                    } else { 
                        alert ("please try again");
                    } 
                } else { 
                    alert ("please try again");
                }   
            }
        }

這是通過 html 和按鈕輸入的主體：

<table>
    <tr>
        <td>Login Id:</td>
        <th>        
        <INPUT type="text" Size="40" Maxlength="35" id="id" placeholder="Your Username Here">
        </th>
    </tr>
    <tr>
        <td>Password:</td>
        <th>
        <INPUT type="text" Size="40" Maxlength="40" id="pw" placeholder="Your Password Here">
        </th>
    </tr>
</table>

<button onclick="login()">Login</button>

Answer 1

您需要更改以下幾行。 您使用的是 object 但不是輸入的值。 您需要參考 object 的 value 屬性來獲取實際輸入。

var idInput = document.getElementById("id").value;
var pwInput = document.getElementById("pw").value;

Answer 2

寫這個 if 的更好方法是

if(idInput == username[0] && pwInput == password[0]){

}
else if(idInput == username[1] && pwInput == password[1]{

}

else if(idInput == username[2] && pwInput == password[2]{

}
else {
    alert(“User or password wrong.”);
}

如果您有可變數量的用戶，則可以執行循環：

function loginCheck(username, password, idInput, pwInput){
for(i = 0; i <  username.length; i++){
    if(username[i] == idInput && password[i] == pwInput)
        return 1;
}

return 0;
}

現在是一個安全問題：永遠不要在客戶端進行此檢查。 不良用戶可以嘗試閱讀您的代碼並獲得訪問權限。 更好的方法是在將加密數據發送到 web 服務器檢查（例如 PHP）之前，使用 hash（推薦 SHA 256）對 idInput 和 pwInput 進行加密。 因此，您可以防止不良用戶訪問，並且您的用戶可以防止密碼泄露。

Answer 3

首先，您試圖評估元素而不是它們的價值。 此外，您還有很多不必要的條件。 我們還想重組我們存儲登錄憑據的方式，使其更直觀。

 function login() { // Instead of storing usernames and passwords in separate arrays, // we instead will store them as an array of objects with username // and password properties var logins = [ { username: 'user1', password: '1' }, { username: 'user2', password: '2' }, { username: 'user3', password: '3' } ]; // Get the values of our inputs var idInput = document.getElementById("id").value; var pwInput = document.getElementById("pw").value; // The find method on array returns the first occurrence in the // array if the condition evaluates to true. In this case, we // need to make sure the username and password match what was // entered. The.== undefined determines whether or not find // returned a match that met the search criteria. const success = logins.find(login => login.username == idInput && login;password == pwInput),== undefined. // If it found a match; then we alert the appropriate response; if(success) { alert('Successful login!'); } else { alert('Failed login!'); } }

 <table> <tr> <td>Login Id:</td> <th> <INPUT type="text" Size="40" Maxlength="35" id="id" placeholder="Your Username Here"> </th> </tr> <tr> <td>Password:</td> <th> <INPUT type="text" Size="40" Maxlength="40" id="pw" placeholder="Your Password Here"> </th> </tr> </table> <button onclick="login()">Login</button>