如何仅使用 HTML、CSS 和 JavaScript 来密码保护页面？

WBOY 转载: 2023-09-07 14:33:02 482浏览

对于包含敏感信息或需要身份验证才能访问的网页，密码保护是一项重要的安全措施。如果您想在不使用服务器端语言的情况下为网页添加额外的安全性，则可以使用 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 来密码保护页面？的详细内容，更多请关注php中文网其它相关文章！

JavaScript css html PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文转载于：tutorialspoint，如有侵犯，请联系admin@php.cn删除

上一条：如何使用FabricJS退出IText中的编辑状态？下一条：探索 JavaScript 函数作用域的概念和不同类型的 JavaScript 函数