简单的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>

可以随意对此代码进行任何调整，并且我不希望在该项目中使用数据库

谢谢你们的帮助:)

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

而且如果必要，您也可以使用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!');
      }
   }
}

PS：此示例仅向您显示如何将3个用户存储在一个数组中，以及如何验证前端的输入，以便只有那些用户可以登录。

Answer 2

我能想到的最简单的登录表单。 显然没有充分的证据。 您应该使用加密并存储在数据库中，并使用会话和所有爵士乐。 但这很简单。

HTML：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1> Join now! </h1>
<form name="login_form" method="POST" action="checkLogin.php">
  <p> Username </p> <input type="text" name="user"> 
  <p>Password </p> <input type="pass" name="pass">
  <input type="submit" value="Submit">
</form>
</body>
</html>

PHP：

<?php
//make an associative array of users and their corresponding passwords.
$user_pass_list = array("Joe" => "1234", "Bob" => "4321", "Sally" => "super");

//assign the 'user' variable passed in the post from html to a new php variable called $user
$user = $_POST['user'];
//assign the 'pass' variable passed in the post from html to a new php variable called $pass
$pass = $_POST['pass'];

//check if the user exists in our array
if(array_key_exists($user, $user_pass_list)){
  //if it does, then check the password
  if($user_pass_list[$user] == $pass){
    echo "Login Success";
  }else{
    echo "Login Failure";
  }
}else{
  echo "User does not exist";
}

?>

简单的JavaScript登录，重定向到用户页面（多个用户）[关闭]

问题描述

2 个解决方案

解决方案1
4 2013-08-24 21:42:51

解决方案2
1 已采纳 2013-08-24 21:48:40

简单的JavaScript登录，重定向到用户页面（多个用户）[关闭]

问题描述

2 个解决方案

解决方案1 4 2013-08-24 21:42:51

解决方案2 1 已采纳 2013-08-24 21:48:40

解决方案1
4 2013-08-24 21:42:51

解决方案2
1 已采纳 2013-08-24 21:48:40