我正在尝试使用Javascript创建一个基本的登录屏幕,其中我没有太多经验。我设法得到了这么多,但出于某种原因,每当我在输入框中输入文本时,无论是否是正确的密码,它都会重定向我。
另外,第二个问题,为了确定用户是否已登录(将其重定向到登录页面),我是否必须使用除JS之外的其他东西,例如PHP?
代码:
<!doctype html>
<html>
<head>
<title>Login</title>
<script type="text/javascript">
function login()
{
if (password = "cat")
{
location.assign("home.html");
}
}
</script>
</head>
<body>
Password: <input type = "password" name = "password">
<input type = "button" value = "Login" onclick = "login()">
</body>
</html>
答案 0 :(得分:2)
目前您使用的是if(password = "cat")
,它实际上是一个未用于comparison
的赋值运算符。如果您不知道要比较的数据类型,请使用==
,否则您可以使用===
。
在其他词中
==
仅用于比较值。
===
用于比较值和类型。
像这样检查
if(password === "cat")
如果你想创建一个网络应用程序或其他东西,你的另一个查询。您应该使用PHP or WPF or any other like JSON
等服务器端交互。
答案 1 :(得分:0)
这实际上是实现登录的错误方法。任何密码检查都必须在服务器上进行,否则密码将在客户端上可见,用户查看所需密码将是微不足道的。此外,请,请,请不要创建另一个用户名/密码登录...这是OAuth2旨在解决的问题;让身份专家处理登录,并简单地委托给另一个身份提供者。
话虽如此,你的代码中的错误是你使用单个等号(&#34; =&#34;)执行赋值,而你真的打算使用double equals(&#34; = =&#34;)或三等于(&#34; ===&#34;)进行比较。
答案 2 :(得分:0)
之前有很多人问过这个问题。代码需要对服务器使用Ajax请求。
此外,您确实需要服务器端语言来进行验证。像下面的例子,例子是使用Jquery库
HTML
<body>
<?php session_start(); ?>
<div id="profile">
<?php if(isset($_SESSION['user_name'])){
?>
<a href='logout.php' id='logout'>Logout</a>
<?php }else {?>
<a id="login_a" href="#">login</a>
<?php } ?>
</div>
<div id="login_form">
<div class="err" id="add_err"></div>
<form action="login.php">
<label>User Name:</label>
<input type="text" id="user_name" name="user_name" />
<label>Password:</label>
<input type="password" id="password" name="password" />
<label></label><br/>
<input type="submit" id="login" value="Login" />
<input type="button" id="cancel_hide" value="Cancel" />
</form>
</div>
<div id="shadow" class="popup"></div>
</body>
的Javascript
<script type="text/javascript">
$(document).ready(function(){
$("#login_a").click(function(){
$("#shadow").fadeIn("normal");
$("#login_form").fadeIn("normal");
$("#user_name").focus();
});
$("#cancel_hide").click(function(){
$("#login_form").fadeOut("normal");
$("#shadow").fadeOut();
});
$("#login").click(function(){
username=$("#user_name").val();
password=$("#password").val();
$.ajax({
type: "POST",
url: "login.php",
data: "name="+username+"&pwd="+password,
success: function(html){
if(html=='true')
{
$("#login_form").fadeOut("normal");
$("#shadow").fadeOut();
$("#profile").html("<a href='logout.php' id='logout'>Logout</a>");
}
else
{
$("#add_err").html("Wrong username or password");
}
},
beforeSend:function()
{
$("#add_err").html("Loading...")
}
});
return false;
});
});
</script>
PHP代码
<?php
session_start();
$username = $_POST['name'];
$password = md5($_POST['pwd']);
$mysqli=mysqli_connect('localhost','username','password','database');
$query = "SELECT * FROM user WHERE username='$username' AND password='$password'";
$result = mysqli_query($mysqli,$query)or die(mysqli_error());
$num_row = mysqli_num_rows($result);
$row=mysqli_fetch_array($result);
if( $num_row >=1 ) {
echo 'true';
$_SESSION['user_name']=$row['username'];
}
else{
echo 'false';
}
?>