我有一個 html 登錄頁面并使用 javascript 來隱藏用戶名和密碼：
Javascript：
function myFunction(){
var user = document.getElementById("username").value;
var pass = document.getElementById("pass").value;
if(user == "user1" && pass == "zzxx"){
window.location.href="about.html"}
else if(user == "user2" && pass == "xxzz"){
window.location.href="about2.html"}
else if(user == "user3" && pass == "ooppp"){
window.location.href="about3.html"
} else{
alert("Incorrect username or password");
}
HTML：
html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Login</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/invisible_debut.js" ></script>
</head>
<body>
<div class="loginBox">
<h1>Login</h1>
<div class="textbox">
<i class="fas fa-user"></i>
<input name="username" id="username" type="text"placeholder="Username">
</div>
<div class="textbox">
<i class="fas fa-lock"></i>
<input name="pass" id="pass" type="password"placeholder="Password">
</div>
<button value="Submit" class="btn btn-success"
onclick="myFunction()">Submit</button>
</form>
</div>
</body>
<div class="bg"></div>
</html>
我想通過直接輸入 ..../about.html 來阻止用戶轉到 about.html 我只希望人們通過用戶名和密碼登錄。我怎樣才能做到這一點？非常感謝！
uj5u.com熱心網友回復：
您將需要存盤一些資訊
localStorage
確保該用戶已經訪問并登錄到您的網站。當用戶嘗試直接進入關于頁面而不登錄時 - 您可以將他們重定向到登錄頁面。
uj5u.com熱心網友回復：
使用 session-storage 或 local-storage 來存盤用戶的值，然后在 about 頁面中檢查該值，如果不存在則將用戶重定向回索引頁面。
function myFunction() {
var user = document.getElementById("username").value;
var pass = document.getElementById("pass").value;
if(user == "user1" && pass == "zzxx") {
window.sessionStorage.setItem("user", "user1");
window.location.href="about.html"
} else if(user == "user2" && pass == "xxzz") {
window.sessionStorage.setItem("user", "user2");
window.location.href="about2.html"
} else if(user == "user3" && pass == "ooppp") {
window.sessionStorage.setItem("user", "user3");
window.location.href="about3.html"
} else {
alert("Incorrect username or password");
}
在 about 頁面使用上面的 session-storage-item
window.onload = function() {
if (window.sessionStorage.getItem("user")) {
var usr = window.sessionStorage.getItem("user");
if(user != "user1") {
window.location.replace("index.html");
}
} else {
window.location.replace("index.html");
}
}
uj5u.com熱心網友回復：
您可以document.referrer用來檢查它是否是您的網站
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/328963.html
標籤：javascript html 验证
上一篇：簡單的服務器到服務器身份驗證協議
下一篇：JWT注冊問題