注册
|
登录
发帖
热搜
活动
交友
discuz
论坛
BBS
翼度工具
翼度网址导航
开发工具
Linux命令速查
网页设计配色表
在线制作icon
颜色代码选取器
翼度科技
»
论坛
›
编程开发
›
JavaScript
›
查看内容
返回列表
发新帖
使用CSS、HTML、JavaScript实现一个简单的身份验证页
颓怠
颓怠
当前离线
积分
9
3
主题
3
帖子
9
积分
新手上路
新手上路, 积分 9, 距离下一级还需 41 积分
新手上路, 积分 9, 距离下一级还需 41 积分
积分
9
发消息
显示全部楼层
这是我在博客园的第一篇博客,也是我人生中的第一篇博客。希望它能够记录我的成长,帮助更多的人。
最近在写我们社团的
社团网站
,有一个页面不太希望普通访客能访问到,所以想做一个“统一身份验证验证”,但是又苦于社团网站搭建是纯静态站,没法做数据库,只能妥协,将账号密码字符串组写到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部分
<link rel="stylesheet" type="text/css" href="https://new.hkems-stmo.top/css/bootstrap.min.css" />
<p >统一身份验证验证</p>
<p >欢迎访问科技社规划备忘录,在进行浏览前,我们需要验证你的身份。</p>
<form name="AandP" >
<input id="account" placeholder="请输入账号:"
/>
<input id="password" type="password" placeholder="请输入密码"
/>
</form>
<button onclick="dontknow()">我不知道密码</button>
<button onclick="verify()">验证并访问</button>
复制代码
Javascript部分
[code]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{ /*如果尝试机会
上一篇:
JS三大运行时全面对比:Node.js vs Bun vs Deno
下一篇:
12-web前端轮播图案例 (小米商城)
发表于 2023-9-27 18:10:56
举报
回复
使用道具
分享
返回列表
发新帖
本版积分规则
高级模式
B
Color
Image
Link
Quote
Code
Smilies
您需要登录后才可以回帖
登录
|
立即注册
快速回复
快速回复
返回顶部
返回顶部
返回列表
返回列表