我如何检查给定的用户名和密码是否是用户输入的，并提醒成功或失败?HTML和JS

Question

正如标题中所说，我如何检查给定的用户名和密码是否是用户输入的，并提醒成功或失败？警报不再弹出。。我在html文件中嵌入了js脚本。

这是脚本：

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

您需要更改以下行。您使用的是对象，而不是输入的值。您需要引用对象的value属性才能获得实际的输入。

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

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

如果你有可变数量的用户，你可以做一个循环：

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(之前，用哈希对idInput和pwInput进行加密(修复SHA 256(。因此，您可以防止不良用户访问，您的用户也可以防止密码泄露。

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>