0

我的学校下周要进行为期 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

再次感谢

4

2 回答 2

4

据我了解，您将只有 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 个用户存储在一个数组中，以及如何在前端验证输入，以便只有这些用户才能登录。

于 2013-08-24T21:42:51.220 回答
1

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

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";
}

?>
于 2013-08-24T21:48:40.480 回答