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

  这是我在博客园的第一篇博客,也是我人生中的第一篇博客。希望它能够记录我的成长,帮助更多的人。

  最近在写我们社团的社团网站,有一个页面不太希望普通访客能访问到,所以想做一个“统一身份验证验证”,但是又苦于社团网站搭建是纯静态站,没法做数据库,只能妥协,将账号密码字符串组写到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。

恍惚交错落花雨

2023年9月25日

热门相关:豪门蜜爱:独宠天后小萌妻   网游三国之城市攻略   悠哉兽世:种种田,生生崽   紫府仙缘   重生成偏执霍少的小仙女