如何僅使用HTML、CSS和JavaScript保護頁面密碼？

僅使用HTML、CSS和JavaScript來保護頁面密碼，對於包含敏感資訊或需要身份驗證才能訪問的網頁來說是一項重要的安全措施。在本文中，我們將瞭解如何建立一個簡單的表單，要求使用者在檢視受保護頁面的內容之前輸入密碼。

在本文中，我們有一些文字資訊，我們的任務是僅使用HTML、CSS和JavaScript來保護頁面密碼。

保護頁面密碼的方法

以下是僅使用HTML、CSS和JavaScript保護頁面密碼的方法列表，我們將在本文中逐步解釋並提供完整的示例程式碼。

基本的JavaScript密碼身份驗證

為了僅使用HTML、CSS和JavaScript保護頁面密碼，我們將使用一個**警告**框來獲取使用者的輸入值，並使用while迴圈來匹配輸入的密碼和正確的密碼。

  • 首先，我們建立了一個div容器，在輸入正確密碼後顯示兩個標題。我們設定了div的背景顏色，並使用text-align屬性居中對齊文字。
  • 我們建立了一個名為**passcodeprotect**的函式來驗證密碼。我們使用簡單的while迴圈來檢查輸入的密碼是否正確。
  • 我們使用**prompt()**獲取使用者的輸入，並將其儲存在一個名為**passcode**的變數中。然後將**passcode**與**password**進行比較。
  • 如果輸入的密碼不正確，則它會顯示一個警告框，顯示密碼不正確，並且函式將再次被呼叫。
  • 如果密碼相同，即正確的密碼，則它會顯示一個警告框，並使用**display**屬性顯示div容器。它是透過使用getElementById獲取容器，然後使用display屬性來實現的。

示例

這是一個完整的示例程式碼，實現了上述步驟，以僅使用HTML、CSS和JavaScript來保護頁面密碼。

<!DOCTYPE html>
<html>
<head>
    <style>
        #container {
            background-color: #f0f8ff;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="container">
        <h2>Correct Password</h2>
        <h3>Welcome to TutorialsPoint..</h3>
    </div>
    <script>
        let password = "tutorial";
        (function passcodeprotect() {
            let passcode = prompt("Enter PassCode");
            while (passcode !== password) {
                alert("Incorrect PassCode");
                return passcodeprotect();
            }
        }());
        alert('Welcome To The TP..!');
        document.getElementById("container")
            .style.display = "block";
    </script>
</body>
</html>

使用Javascript表單驗證保護密碼

在這種僅使用HTML、CSS和JavaScript保護頁面密碼的方法中，我們將使用HTML表單來獲取使用者的輸入值。然後使用if-else語句將使用者的輸入值與正確的密碼進行比較。

  • 首先，我們使用HTML form標籤建立了一個表單，該表單包含一個input欄位和一個button。
  • 然後，我們建立了一個div容器，在輸入正確密碼後顯示兩個標題。我們設定了div的背景顏色，並使用text-align屬性居中對齊文字。
  • 我們建立了一個名為**fun**的函式來驗證密碼。我們使用簡單的if-else條件語句來檢查輸入的密碼是否正確。
  • 使用者的輸入值使用value屬性讀取，並存儲在一個名為inputPswd的變數中。然後將**inputPswd**與**correctPswd**進行比較。
  • 如果密碼相同，即正確的密碼，則它將使用display屬性顯示div容器。它是透過使用getElementById獲取容器，然後使用display屬性來實現的。
  • 如果密碼不相同，即密碼不正確，則它將使用alert方法顯示一個警告框，指出密碼不正確。

示例

這是一個完整的示例程式碼，實現了上述步驟，以僅使用HTML、CSS和JavaScript來保護頁面密碼。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        #container {
            display: none;
            background-color: #f0f8ff;
            text-align: center;
        }
    </style>
</head>
<body>
<h2>Enter Password</h2>
<form id="pswd">
    <input type="password" id="validate" 
           placeholder="Enter Password">
    <button type="button" onclick="fun()">Submit</button>
</form>
<div id="container">
    <h2>Correct Password</h2>
    <h3>Welcome to TutorialsPoint..</h3>
</div>
<script>
    function fun() {
        let inputPswd = document.getElementById("validate")
                                .value;
        let correctPswd = "TutorialsPoint";
        if (inputPswd === correctPswd) {
            document.getElementById("container")
                .style.display = "block";
            document.getElementById("pswd")
                .style.display = "none";
        } else {
            alert("Incorrect password!");
        }
    }
</script>
</body>
</html>

結論

在本文中，我們瞭解瞭如何僅使用HTML、CSS和JavaScript來保護頁面密碼。我們使用了兩種簡單的方法來說明如何保護頁面密碼，分別是使用基於JavaScript的表單驗證和基本的Javascript密碼身份驗證。

更新於：2024年10月24日

18K+ 瀏覽量

開啟您的職業生涯

透過完成課程獲得認證

開始學習
廣告