javascript - 简单的 JavaScript 登录，重定向到用户页面(多用户)

Question

我的学校下周将进行为期 5 天的 html 挑战，我正在实践我的想法，

言归正传，

我想使用支持多个用户的外部 javascript 脚本制作一个登录系统 当两个登录表单在代码的特定部分有效时，它将重定向到用户页面: 我设置了两个输入:

<center> <h1> Join now! </h1> </center>
</header>
<p> Username </p> <input> </input><p> Password </p> <input>  </input>
<button> Submit </button>

请随意对此代码进行任何必要的调整，我不希望在该项目中使用数据库

谢谢大家的帮助:)

哦附注， 我只需要一个三用户系统

如果需要的话你也可以使用jquery

再次感谢

Answer 1

据我了解，您只有 3 个预定义用户可以登录。我想您只想展示应用程序的功能，而不构建防弹登录系统。为了实现这一点，您可以使用如下形式:

<form>
   <legend>Log In</legend>

   <fieldset>
       <label for="username">Username: </label>
       <input id="username" type="text">

       <label for="password">Password: </label>
       <input id="password" type="password">

       <button id="login" type="button">Log In!</button>
   </fieldset>
</form>

纯 JavaScript 验证和重定向:

var users = [
    { username: 'user1', password: 'pass1' },
    { username: 'user2', password: 'pass2' },
    { username: 'user3', password: 'pass3' }
];

var button = document.getElementById('login');

button.onclick = function() {
   var username = document.getElementById('username').value;
   var password = document.getElementById('password').value; 

   for (var i = 0; i < users.length; i++) {
      if(username == users[i].username && password == users[i].password) {
         window.location.href = 'http://where/you/want/to/redirect/';
         break;
      }else{
         alert('You are trying to break in!');
      }
   }
}

P.S.:此示例仅向您展示如何将 3 个用户存储在数组中，以及如何验证前端的输入，以便只有这些用户可以登录。