如何只使用HTML、CSS和JavaScript密码保护一个页面

密码保护是对包含敏感信息或需要身份验证才能访问的网页的重要安全措施。如果您想在不使用服务器端语言的情况下为网页添加额外的安全性，您可以使用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>

当脚本执行时，它将生成一个显示警示的输出，要求输入密码。当用户匹配密码(“tutorial”)时，它将显示一条消息；否则，在网页上会显示一个密码错误的消息。

示例

考虑以下示例，我们在其中创建了一个输入字段，用于输入密码来保护网页，并添加了一个点击按钮。

<!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）并且切换复选框时，网页内的内容将被显示。