(登录页面)如何检查用户输入的用户名和密码是否与保存在两个数组中的用户名和密码匹配，使用JS?

Question

我是一个JavaScript(和一个整体编程)新手，这是我的第一次练习之一。我必须做一个登录页面，用户必须输入已经存在的用户名和密码，它们保存在两个不同的数组中(一个用于用户名，另一个用于密码):

const users=["java", "visual", "personal", "key", "master"]
const passwords=["script", "studio", "computer", "board", "chief"];

一旦用户点击"提交"按钮时，网站会告诉他登录是否成功(输入的凭据是否存在)。问题是，当按钮被点击时，什么都没有发生:在代码中，它应该检查用户输入的凭据是否与数组中的现有凭据匹配，并与其位置匹配，但它没有，我不明白为什么。代码粘贴在下面。JS功能:

function login(){
    const a=document.getElementById("usn").value;
    const b=document.getElementById("psw").value;
    for(var i=0; i<users.length; i++){
        for(var j=0; j<passwords.length; i++){
            if(users.indexOf(a)==passwords.indexOf(b)){
                if(users[i].includes(a) && passwords[j].includes(b)){
                    var suc=document.getElementById("success");
                    suc.innerHTML="Login successful";
                    suc.style.backgroundColor="green";
                }
                else{
                    var fail=document.getElementById("fail");
                    fail.innerHTML="Login failed, user not registered";
                    fail.style.backgroundColor="red";
                }
            }
            else
                continue;
        }
    }
}

HTML(如果需要):

<div class="col-md-5 col-sm-6 col-12">
            <p class="font title pt-3">Login</p>
            <p class="font">Don't have an account yet? <span>Create yours now</span>, it takes just a few seconds.</p>
            <div id="fail" class="pt-2 pb-2 ps-1 pe-1 font"></div>
            <div id="success" class="pt-2 pb-2 ps-1 pe-1 font"></div>
            <br>
            <div>
                <p class="font">Username</p>
                <div>
                    <input type="text" class="inf pb-3 inf" id="usn" onclick="switchColors()">
                </div>
            </div>
            <br>
            <div>
                <p class="font">Password</p>
                <div>
                    <input type="text" class="inf pb-3 inf" id="psw" onclick="switchColors()">
                    <i class="bi bi-eye-slash" id="eye2" onclick="change()"></i>
                    <i class="bi bi-eye hidden" id="eye1" onclick="change()"></i>
                </div>
            </div>
            <br>
            <button type="button" class="btn btn-primary" id="btn" onclick="login()">Login</button>
        </div>
    </div>

CSS(如果需要):

.inf{
    border: none;
    outline: none;
    border-bottom: 1px solid black;
}
.hidden{
    display: none;
}

注意:这是一个为学校做的练习，仅用于学习目的。

Answer 1

可能像这样:

  const users=["java", "visual", "personal", "key", "master"]
  const passwords=["script", "studio", "computer", "board", "chief"];
  function login(){
    const a=document.getElementById('usn').value;
    const b=document.getElementById('psw').value;
    var inxa = users.indexOf(a);
    var inxb = passwords.indexOf(b);
    if(inxa < 0){
      console.log('Login not found...');
    }else if(inxb < 0 || inxa !== inxb){
      console.log('Password incorrect...');
    }else{   /* (inxa > 0 && inxb > 0 && inxa === inxb) */
      console.log('You have successfully logged in');
    }
 }

   <div>Login:</div>
   <input type="text" id="usn">
   <div>Password:</div>
   <input type="text" id="psw">
   <br>
   <button type="button" onclick="login()">Login</button>

Answer 2

有很多方法可以变成相同的结果。因为你正在学习JS，这是另一种方法。我将把剩下的代码留给你学习;-)

注意(passwords[i] == psw)将返回true或false

const usn = document.getElementById("usn").value;
const psw = document.getElementById("psw").value;
let success = false;
for (let i=0; i < users.length; i++) {
  if (users[i] == usn) {
    success = (passwords[i] == psw);
  }
}
if (success) {
  // login success
} else {
  // login failed
}

Answer 3

const users = ["java", "visual", "personal", "key", "master"];
const passwords = ["script", "studio", "computer", "board", "chief"];
function login() {
  const username = document.getElementById("usn").value;
  const password = document.getElementById("psw").value;
  const indexUsername = users.indexOf(username);
  const indexPassword = passwords.indexOf(password);
  if(indexUsername < 0){
    console.log("user not found")
  } else if (indexUsername === indexPassword) {
    const success = document.getElementById("success");
    success.innerHTML = "Login successful";
    success.style.backgroundColor = "green";
  } else {
    const fail = document.getElementById("fail");
    fail.innerHTML = "Login failed, user not registered";
    fail.style.backgroundColor = "red";
  }
}

注意:始终尝试在变量、函数等中使用显式名称。