简单的 JavaScript 登录，重定向到用户页面（多用户）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18423277/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Simple JavaScript Login, Redirects to the user's page (Multiple Users)
提问by Ronan Duffy
my school is doing a 5 day html challenge next week and i'm practicing my idea,
我的学校下周要进行 5 天的 html 挑战，我正在实践我的想法，
To get to the point,
进入正题，
I want to make a login system using an external javascript script that supports multiple users and when the two login forms are valid from the certain part of the code it will redirect to the users page: I have the two inputs set up:
我想使用支持多个用户的外部 javascript 脚本制作登录系统，当两个登录表单从代码的特定部分有效时，它将重定向到用户页面：我设置了两个输入：
<center> <h1> Join now! </h1> </center>
</header>
<p> Username </p> <input> </input><p> Password </p> <input> </input>
<button> Submit </button>
Feel free to make any adjustments needed to this code and I'd prefer not to use database's for this project
随意对此代码进行任何必要的调整，我不想在这个项目中使用数据库
Thanks for the help guys :)
谢谢你们的帮助：）
Oh P.S, I only need a three user system
哦 PS，我只需要一个三用户系统
And you may user jquery aswell if necessary
如有必要，您也可以使用 jquery
Thanks Again
再次感谢
回答by vladzam
As far as I understand, you will only have 3 predefined users that might login. I presume you only want to show the functionality of the application, without building a bullet proof login system. To accomplish this, you could have a form like this:
据我了解，您将只有 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>
Pure JavaScript validation and redirect:
纯 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.: This example just shows you how to store the 3 users in an array and how to validate the input on the front-end so that only those users can login.
PS：这个例子只是向你展示了如何将 3 个用户存储在一个数组中，以及如何验证前端的输入，以便只有这些用户才能登录。
回答by carter
The simplest login form I can think of. Obviously not full proof. You should use encryption and store in database and use sessions and all that jazz. But this is simple enough.
我能想到的最简单的登录表单。显然不是充分的证据。您应该使用加密并存储在数据库中，并使用会话和所有爵士乐。但这很简单。
HTML:
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：
<?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";
}
?>
