翼度科技»论坛 编程开发 JavaScript 查看内容

使用CSS、HTML、JavaScript实现一个简单的身份验证页

3

主题

3

帖子

9

积分

新手上路

Rank: 1

积分
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部分
  1. /* 遮罩层,用于挡住内容 */
  2. #overlayverify {
  3.         position: fixed;
  4.         left: 0px;
  5.         top: 0px;
  6.         height: 100%;
  7.         background-color: #cccccc;
  8.         z-index: 100
  9. }
  10. /* 模态框主体 */
  11. .popup {
  12.   background-color: #ffffff;
  13.   height: 430px;
  14.   border-radius: 5px;
  15.   margin: 100px auto;
  16.   text-align: center
  17. }
  18. /* 模态框的标题 */
  19. .popup_title {
  20.   height: 60px;
  21.   line-height: 60px;
  22.   border-bottom: solid 1px #cccccc
  23. }
  24. /* 模态框的内容 */
  25. .popup_content {
  26.   text-align: left;
  27.   margin: 0 auto;
  28.   width: 90%;
  29.   height: 200px;
  30.   line-height: 45px;
  31.   padding: 10px 20px;
  32.   text-indent:2em
  33. }
  34. .popup_line{
  35.   margin: 0 auto;
  36.   height: 20px;
  37.   width: 85%;
  38.   border-bottom: 1px solid #dbdbdb
  39. }
  40. /* 模态框的按钮栏 */
  41. .popup_btn {
  42.   padding-top: 30px
  43. }
  44. /* 弹出框的按钮 */
  45. .popup_btn button.ds {
  46.   color: #778899;
  47.   width: 40%;
  48.   height: 40px;
  49.   cursor: pointer;
  50.   border: solid 1px #cccccc;
  51.   border-radius: 5px;
  52.   margin: 5px 10px;
  53.   color: #ffffff;
  54.   background-color: rgb(150,150,150)
  55. }
  56. .popup_btn button.ag {
  57.     color: #778899;
  58.     width: 40%;
  59.     height: 40px;
  60.     cursor: pointer;
  61.     border: solid 1px #cccccc;
  62.     border-radius: 5px;
  63.     margin: 5px 10px;
  64.     color: #ffffff;
  65.     background-color: #337ab7
  66.   }
复制代码
 
HTML部分
  1. <link rel="stylesheet" type="text/css" href="https://new.hkems-stmo.top/css/bootstrap.min.css" />
  2.   
  3.    
  4.       
  5.       
  6.       
  7.       
  8.         
  9.         <p >统一身份验证验证</p>
  10.         <p  >欢迎访问科技社规划备忘录,在进行浏览前,我们需要验证你的身份。</p>
  11.         
  12.         <form name="AandP" >
  13.          
  14.           <input  id="account" placeholder="请输入账号:"
  15.              />
  16.           <input  id="password" type="password" placeholder="请输入密码"
  17.              />
  18.          
  19.         </form>
  20.         
  21.         
  22.         
  23.         
  24.           <button  onclick="dontknow()">我不知道密码</button>
  25.           <button  onclick="verify()">验证并访问</button>
  26.          
  27.         
  28.       
  29.       
  30.       
  31.    
  32.   
  33.   
复制代码
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{    /*如果尝试机会

举报 回复 使用道具