Как мне проверить, являются ли заданные имя пользователя и пароль тем, что вводит пользователь, и предупреждают об успехе или неудаче? 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

Во-первых, вы пытаетесь оценить элементы, а не их ценность. Кроме того, у вас много ненужных условных выражений. Мы также хотим реструктурировать то, как мы храним наши учетные данные, чтобы сделать его более интуитивно понятным.

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>

Answer 2

Лучший способ написать это, если

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.”);
}

Если у вас есть переменное количество пользователей, вы можете сделать al oop:

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

return 0;
}

Теперь проблема безопасности : Никогда не делайте эту проверку на стороне клиента. Плохие пользователи могут попытаться прочитать ваш код и получить доступ. Лучше всего зашифровать idInput и pwInput с помощью ha sh (рекомендуется SHA 256) перед отправкой этих данных шифрования на проверку веб-сервера (например, PHP). Таким образом, вы защищены от несанкционированного доступа, а ваши пользователи защищены от утечки пароля.

Answer 3

Вам необходимо изменить следующие строки. Вы используете объект, но не введенное значение. Чтобы получить фактический ввод, вам необходимо указать атрибут value объекта.

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