对于包含敏感信息或需要身份验证才能访问的网页，密码保护是一项重要的安全措施。如果您想在不使用服务器端语言的情况下为网页添加额外的安全性，则可以使用 HTML、CSS 和 JavaScript 来密码保护页面。
本文将向您展示如何创建一个简单的表单，要求用户输入密码才能查看受保护页面的内容。让我们看看以下示例，以便更好地了解使用密码保护页面。
示例
在下面的示例中，我们正在运行脚本并保护网页；如果用户尝试访问该网页，则会提示他们输入密码。
var password = "tutorial"; (function passcodeprotect() { var passcode = prompt("Enter PassCode"); while (passcode !== password) { alert("Incorrect PassCode"); return passcodeprotect(); } }()); alert('Welcome To The TP..!');
执行脚本时，它将生成一个输出，显示一条要求输入密码的警报。当用户匹配密码（“教程”）时，会显示一条消息；否则，网页上会显示错误的密码。
立即学习“Java免费学习笔记（深入）”；
无阶未来模型擂台/AI 应用平台
无阶未来模型擂台/AI 应用平台，一站式模型+应用平台
35 查看详情 
示例
考虑以下示例，我们为输入的密码创建一个输入字段，以保护网页以及单击按钮。
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("TP, The Best E-Learning
"); } else { alert("Incorrect Passcode"); location.reload(); } } }
运行上述脚本时，将弹出输出窗口，显示用于输入密码的输入字段以及网页上的单击按钮。如果用户匹配密码（12345），它将打开由文本组成的表单；否则，将显示错误的密码。
示例
执行下面的示例，我们在其中运行脚本以保护网页在执行脚本后不显示其内容。
Enter Password:
Show resultsMahendra 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.
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'; } }
执行脚本时，它将生成一个输出，显示用于输入密码的输入字段和网页上的切换复选框。当用户匹配密码（54）并切换复选框时，就会显示网页内的内容。
以上就是如何仅使用 HTML、CSS 和 JavaScript 来密码保护页面？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/530707.html
微信扫一扫 
支付宝扫一扫 
