这是我在博客园的第一篇博客，也是我人生中的第一篇博客。希望它能够记录我的成长，帮助更多的人。
最近在写我们社团的社团网站，有一个页面不太希望普通访客能访问到,所以想做一个“统一身份验证验证”，但是又苦于社团网站搭建是纯静态站，没法做数据库，只能妥协，将账号密码字符串组写到JavaScript脚本里，最后再混淆加密。当然，现在我已经找到了更好的方法，可惜暂时没有时间完成，我将在后文简述思路，如有可能，我会另开一篇新方法实现过程。
思路如下：
1.首先建立一个遮罩层挡住你要验证后才能看的内容
2.建立一个form表单，为其赋予name
3.然后在表单中添加input密码账号输入框，同时分别建立id（password、account）
4.在提交按钮上使用onclick绑定验证函数
5.按下提交按钮时，启动验证函数
6.验证函数通过.account.value方式分别获取用户在input密码账号输入框中输入的内容
7.首先查询账号，如果账号在account list中，获取其在列表的位数
8.在password list中查询同位数据，将其与读取到的用户输入的密码比较
9.如果正确，关闭遮罩层，显示内容
.......
虽然我主要想分享实现思路，但是想了一下还是把完整的一些样式给出来吧，毕竟我在学习借鉴的时候被很多只给代码，样式半保留，混乱的代码折磨了很久......
具体实现如下：
CSS部分
/* 遮罩层，用于挡住内容 */
#overlayverify {
position: fixed;
left: 0px;
top: 0px;
height: 100%;
background-color: #cccccc;
z-index: 100
}
/* 模态框主体 */
.popup {
background-color: #ffffff;
height: 430px;
border-radius: 5px;
margin: 100px auto;
text-align: center
}
/* 模态框的标题 */
.popup_title {
height: 60px;
line-height: 60px;
border-bottom: solid 1px #cccccc
}
/* 模态框的内容 */
.popup_content {
text-align: left;
margin: 0 auto;
width: 90%;
height: 200px;
line-height: 45px;
padding: 10px 20px;
text-indent:2em
}
.popup_line{
margin: 0 auto;
height: 20px;
width: 85%;
border-bottom: 1px solid #dbdbdb
}
/* 模态框的按钮栏 */
.popup_btn {
padding-top: 30px
}
/* 弹出框的按钮 */
.popup_btn button.ds {
color: #778899;
width: 40%;
height: 40px;
cursor: pointer;
border: solid 1px #cccccc;
border-radius: 5px;
margin: 5px 10px;
color: #ffffff;
background-color: rgb(150,150,150)
}
.popup_btn button.ag {
color: #778899;
width: 40%;
height: 40px;
cursor: pointer;
border: solid 1px #cccccc;
border-radius: 5px;
margin: 5px 10px;
color: #ffffff;
background-color: #337ab7
}
HTML部分
<script src="https://new.hkems-stmo.top/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://new.hkems-stmo.top/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!--调用需要的框架文件-->
<div class="container">
<div class="row">
<div id="overlayverify" style="display: block;">
<!--建立遮罩层挡住内容-->
<div class="col-sm-2 col-lg-4"></div>
<!--bootstarp框架，用于调节样式-->
<div class="popup col-sm-8 col-lg-4">
<!--建立一个模态框-->
<p class="popup_title">统一身份验证验证</p>
<p class="popup_content overflow-auto" style="line-height: 40px;">欢迎访问科技社规划备忘录，在进行浏览前，我们需要验证你的身份。</p>
<!--说明-->
<form name="AandP" style="margin-top: -20%;">
<!--建立名为AandP的表单（Account and Password），容纳用户输入进输入框的内容-->
<input class="form-control signinput" id="account" placeholder="请输入账号："
style="width: 80%;margin-left: 10%;margin-bottom: 15px;" />
<input class="form-control" id="password" type="password" placeholder="请输入密码"
style="width: 80%;margin-left: 10%;margin-bottom: 10px;" />
<!--分别设置了账号密码的输入框，各自用id="xxx"来标识-->
</form>
<div id="out" style="color: red;"></div>
<!--建立一个id为out的输出反馈的div，登陆失败等信息被写入到这-->
<div class="popup_line"></div>
<div class="popup_btn" style="margin-top: -20px;">
<button class="cancelBtn ds overflow-hidden" onclick="dontknow()">我不知道密码</button>
<button class="confirmBtn ag overflow-hidden" onclick="verify()">验证并访问</button>
<!--用onclick绑定函数，点击按钮运行onclick指定的函数-->
</div>
</div>
<div class="col-sm-2 col-lg-4"></div>
<!--bootstarp框架，用于调节样式-->
</div>
</div>
</div>
<div>
<!--在这里写入你想在通过验证之后展示的内容-->
</div>Javascript部分
var testV = 3;
/*定义最高尝试次数*/
var error = 0;
/*定义初始错误量*/
var accountlist = ['账户1', '账户2', '账户3', '账户4'];
var passwordlist = ['密码1', '密码2', '密码3', '密码4'];
/*定义账号密码列表*/
function verify() {
/*用户提交验证*/
var account = AandP.account.value;
var password = AandP.password.value;
/*从AandP表单里获取用户输入的账号密码，为相应的变量名赋值*/
if(testV > 1){
/*如果尝试机会>1*/
if(accountlist.indexOf(account) == -1){
/*则使用accountlist.indexOf(account)方法获得输入的用户名在用户列表的位数，用if语句判断如果等于-1（即不存在）*/
error += 1;
/*则使error变量+1*/
}
else{
/*如果不等于-1，即意味着用户输入的用户名存在，就可以接着进行密码的核验*/
var Correspondingpassword = passwordlist[accountlist.indexOf(account)];
/*用 列表名[位数（通过accountlist.indexOf(account)获得）] 方法查询到用户输入的用户名相对应的密码，赋入Correspondingpassword变量*/
if(Correspondingpassword == password){
out.innerHTML = '账号密码正确，验证通过';
}
/*将用户输入的密码与查询到与用户输入的用户名相对应的密码对比，如果成功则用innerHTML将提示输出到id为out的块组件*/
else{
error += 1;
}
/*如果不匹配，对error变量+1*/
}
if(error != 0){
/*验证部分结束。如果error变量不等于零，即至少发生了账号错误或账号密码不匹配中的一个事件：*/
testV -= 1
out.innerHTML = '账号或密码错误，你还剩'+ testV+ '次机会';
/*让尝试次数testV-1，然后用innerHTML将提示输出到id为out的块组件*/
}
else{
/*如果error变量等于零，则验证成功*/
overlayverify.style.display = "none";
/*为挡住页面的模态框写入“display:none”的样式，使其消失*/
}
}
else{
/*如果尝试机会<1，即没有尝试机会了*/
out.innerHTML = '登陆冻结，请刷新或联系管理员';
/*用innerHTML将提示输出到id为out的块组件*/
}
document.getElementById("AandP").reset();
/*重置用户输入的数据*/
}
function dontknow() {
/*用户不知道密码*/
window.location.href = '其他页面的url'
/*跳转到其他页面*/
}JavaScript在录入账号密码后可以进行混淆加密。
注意：！！！bootstarp框架应在合理位置放置，否则会发生错误！
完整示例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="page-enter" content="revealTrans(duration=5.0,transition=20)">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<title>身份验证页(页面标题)</title>
<link rel="prefetch" href="/images/UI/logo-big.png">
<link rel="prefetch" href="/function/header.html">
<link rel="prefetch" href="/function/footer.html">
<meta name="keywords" content="关键词,发布于恍惚交错落花雨的博客园,禁止CSDN转载" />
<meta name="description" content="简介" />
<meta name="revised" content="MQSI, 2023年9月25日" />
<meta name="author" content="MQSI, maqingshui@outlook.com">
<meta name="renderer" content="webkit">
<meta name="copyright" content="本示例网页版权归恍惚交错落花雨所有，禁止CSDN转载">
<!--以上标识头可以不保留-->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://new.hkems-stmo.top/css/bootstrap.min.css" />
<script src="https://new.hkems-stmo.top/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!--调用需要的框架文件-->
<style>
/* 遮罩层，用于挡住内容 */
#overlayverify {
position: fixed;
left: 0px;
top: 0px;
height: 100%;
background-color: #cccccc;
z-index: 100
}
/* 模态框主体 */
.popup {
background-color: #ffffff;
height: 430px;
border-radius: 5px;
margin: 100px auto;
text-align: center
}
/* 模态框的标题 */
.popup_title {
height: 60px;
line-height: 60px;
border-bottom: solid 1px #cccccc
}
/* 模态框的内容 */
.popup_content {
text-align: left;
margin: 0 auto;
width: 90%;
height: 200px;
line-height: 45px;
padding: 10px 20px;
text-indent: 2em
}
.popup_line {
margin: 0 auto;
height: 20px;
width: 85%;
border-bottom: 1px solid #dbdbdb
}
/* 模态框的按钮栏 */
.popup_btn {
padding-top: 30px
}
/* 弹出框的按钮 */
.popup_btn button.ds {
color: #778899;
width: 40%;
height: 40px;
cursor: pointer;
border: solid 1px #cccccc;
border-radius: 5px;
margin: 5px 10px;
color: #ffffff;
background-color: rgb(150, 150, 150)
}
.popup_btn button.ag {
color: #778899;
width: 40%;
height: 40px;
cursor: pointer;
border: solid 1px #cccccc;
border-radius: 5px;
margin: 5px 10px;
color: #ffffff;
background-color: #337ab7
}
</style>
<script>
var testV = 3;
/*定义最高尝试次数*/
var error = 0;
/*定义初始错误量*/
var accountlist = ['账户1', '账户2', '账户3', '账户4'];
var passwordlist = ['密码1', '密码2', '密码3', '密码4'];
/*定义账号密码列表*/
function verify() {
/*用户提交验证*/
var account = AandP.account.value;
var password = AandP.password.value;
/*从AandP表单里获取用户输入的账号密码，为相应的变量名赋值*/
if (testV > 1) {
/*如果尝试机会>1*/
if (accountlist.indexOf(account) == -1) {
/*则使用accountlist.indexOf(account)方法获得输入的用户名在用户列表的位数，用if语句判断如果等于-1（即不存在）*/
error += 1;
/*则使error变量+1*/
}
else {
/*如果不等于-1，即意味着用户输入的用户名存在，就可以接着进行密码的核验*/
var Correspondingpassword = passwordlist[accountlist.indexOf(account)];
/*用 列表名[位数（通过accountlist.indexOf(account)获得）] 方法查询到用户输入的用户名相对应的密码，赋入Correspondingpassword变量*/
if (Correspondingpassword == password) {
out.innerHTML = '账号密码正确，验证通过';
}
/*将用户输入的密码与查询到与用户输入的用户名相对应的密码对比，如果成功则用innerHTML将提示输出到id为out的块组件*/
else {
error += 1;
}
/*如果不匹配，对error变量+1*/
}
if (error != 0) {
/*验证部分结束。如果error变量不等于零，即至少发生了账号错误或账号密码不匹配中的一个事件：*/
testV -= 1
out.innerHTML = '账号或密码错误，你还剩' + testV + '次机会';
/*让尝试次数testV-1，然后用innerHTML将提示输出到id为out的块组件*/
}
else {
/*如果error变量等于零，则验证成功*/
overlayverify.style.display = "none";
/*为挡住页面的模态框写入“display:none”的样式，使其消失*/
}
}
else {
/*如果尝试机会<1，即没有尝试机会了*/
out.innerHTML = '登陆冻结，请刷新或联系管理员';
/*用innerHTML将提示输出到id为out的块组件*/
}
document.getElementById("AandP").reset();
/*重置用户输入的数据*/
}
function dontknow() {
/*用户不知道密码*/
window.location.href = '其他页面的url'
/*跳转到其他页面*/
}
</script>
</head>
<body>
<div class="container">
<div class="row">
<div id="overlayverify" style="display: block;">
<!--建立遮罩层挡住内容-->
<div class="col-sm-2 col-lg-4"></div>
<!--bootstarp框架，用于调节样式-->
<div class="popup col-sm-8 col-lg-4">
<!--建立一个模态框-->
<p class="popup_title">统一身份验证验证</p>
<p class="popup_content overflow-auto" style="line-height: 40px;">欢迎访问科技社规划备忘录，在进行浏览前，我们需要验证你的身份。
</p>
<!--说明-->
<form name="AandP" style="margin-top: -20%;">
<!--建立名为AandP的表单（Account and Password），容纳用户输入进输入框的内容-->
<input class="form-control signinput" id="account" placeholder="请输入账号："
style="width: 80%;margin-left: 10%;margin-bottom: 15px;" />
<input class="form-control" id="password" type="password" placeholder="请输入密码"
style="width: 80%;margin-left: 10%;margin-bottom: 10px;" />
<!--分别设置了账号密码的输入框，各自用id="xxx"来标识-->
</form>
<div id="out" style="color: red;"></div>
<!--建立一个id为out的输出反馈的div，登陆失败等信息被写入到这-->
<div class="popup_line"></div>
<div class="popup_btn" style="margin-top: -20px;">
<button class="cancelBtn ds overflow-hidden" onclick="dontknow()">我不知道密码</button>
<button class="confirmBtn ag overflow-hidden" onclick="verify()">验证并访问</button>
<!--用onclick绑定函数，点击按钮运行onclick指定的函数-->
</div>
</div>
<div class="col-sm-2 col-lg-4"></div>
<!--bootstarp框架，用于调节样式-->
</div>
</div>
</div>
<div>
<p>本示例网页版权归恍惚交错落花雨所有，禁止CSDN转载</p>
<!--在这里写入你想在通过验证之后展示的内容-->
</div>
</body>
</html>优点：好像没什么优点....
缺点：防防不懂技术的得了......懂技术的直接就把遮罩层删了。
当然现在这段代码可以改装一下连上数据库来查询，这样就会变得较为安全可靠。
希望这篇文章能帮到大家，也希望大家能指出我的不足之处。
本人自学野路子，文中部分用语不规范，求各位大佬轻喷。
转载请取得同意并标明原作者。禁止转载至CSDN。
恍惚交错落花雨文章来源：https://www.toymoban.com/news/detail-710182.html
2023年9月25日文章来源地址https://www.toymoban.com/news/detail-710182.html
到了这里，关于使用CSS、HTML、JavaScript实现一个简单的身份验证页的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
