對于包含敏感信息或需要身份驗證才能訪問的網頁，密碼保護是一項重要的安全措施。如果您想在不使用服務器端語言的情況下為網頁添加額外的安全性，則可以使用 HTML、CSS 和 JavaScript 來密碼保護頁面。
本文將向您展示如何創建一個簡單的表單，要求用戶輸入密碼才能查看受保護頁面的內容。讓我們看看以下示例，以便更好地了解使用密碼保護頁面。
示例
在下面的示例中，我們正在運行腳本并保護網頁；如果用戶嘗試訪問該網頁，則會提示他們輸入密碼。
<!DOCTYPE html>
<html>
<body>
<script>
var password = "tutorial";
(function passcodeprotect() {
var passcode = prompt("Enter PassCode");
while (passcode !== password) {
alert("Incorrect PassCode");
return passcodeprotect();
}
}());
alert('Welcome To The TP..!');
</script>
</body>
</html>
登錄后復制
執行腳本時，它將生成一個輸出，顯示一條要求輸入密碼的警報。當用戶匹配密碼（“教程”）時，會顯示一條消息；否則，網頁上會顯示錯誤的密碼。
示例
考慮以下示例，我們為輸入的密碼創建一個輸入字段，以保護網頁以及單擊按鈕。
<!DOCTYPE HTML>
<html>
<body>
<center>
<input type="password" placeholder="passcode" id="tutorial">
<button onclick="protectpasscode()">CHECK</button>
<script>
function protectpasscode() {
const result = document.getElementById("tutorial").value;
let passcode = 12345;
let space = '';
if (result == space) {
alert("Type passcode")
} else {
if (result == passcode) {
document.write("<center><h1>TP, The Best E-Learning </h1></center>");
} else {
alert("Incorrect Passcode");
location.reload();
}
}
}
</script>
</center>
</body>
</html>
登錄后復制
運行上述腳本時，將彈出輸出窗口，顯示用于輸入密碼的輸入字段以及網頁上的單擊按鈕。如果用戶匹配密碼（12345），它將打開由文本組成的表單；否則，將顯示錯誤的密碼。
示例
執行下面的示例，我們在其中運行腳本以保護網頁在執行腳本后不顯示其內容。
<!DOCTYPE html>
<html>
<body style="background-color:#EAFAF1">
Enter Password:
<input type='text' value='' id='input'><br><br>
<input type='checkbox' onclick='protectpasscode()'>Show results
<p id='tutorial' style='display:none; color: black;'>Mahendra Singh Dhoni, also known as MS Dhoni, is an Indian former international
cricketer who was captain of the Indian national cricket team in limited-overs formats
from 2007 to 2017 and in Test cricket from 2008 to 2014. </p>
<script>
function protectpasscode() {
var a = document.getElementById('input');
var b = document.getElementById('tutorial');
if (a.value === '54') {
b.style.display = 'block';
} else {
b.style.display = 'none';
}
}
</script>
</body>
</html>
登錄后復制
執行腳本時，它將生成一個輸出，顯示用于輸入密碼的輸入字段和網頁上的切換復選框。當用戶匹配密碼（54）并切換復選框時，就會顯示網頁內的內容。
以上就是如何僅使用 HTML、CSS 和 JavaScript 來密碼保護頁面？的詳細內容，更多請關注www.92cms.cn其它相關文章！
