1. 技术文章
  2. 完成登录与注册界面的前端

完成登录与注册界面的前端

由 两盒软妹~` 提交于 2019-12-30 18:38:30

完成登录与注册页面的HTML+CSS+JS，其中的输入项检查包括：

用户名6-12位

首字母不能是数字

只能包含字母和数字

密码6-12位

注册页两次密码是否一致

html代码：

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>登陆界面</title>
    <link rel="stylesheet" type="text/css" href="../static/css/normalize.css"/>
    <link rel="stylesheet" type="text/css" href="../static/css/demo.css"/>
    <!--必要样式-->
    <link rel="stylesheet" type="text/css" href="../static/css/component.css"/>
    <!--[if IE]>
    <script src="js/html5.js"></script>
    <![endif]-->
</head>
<body>
<div class="container demo-1">
    <div class="content">
        <div id="large-header" class="large-header">
            <canvas id="demo-canvas"></canvas>
            <div class="logo_box">
                <h3>欢迎你</h3>
                <div class="input_outer">
                    <span class="u_user"></span>
                    <input id="uname" class="text" style="color: #FFFFFF !important" type="text" placeholder="请输入账号">
                </div>
                <div class="input_outer">
                    <span class="us_uer"></span>
                    <input id="upass" class="text" style="color: #FFFFFF !important; position:absolute; z-index:100;"
                           value="" type="password" placeholder="请输入密码">
                </div>
                <div class="errorText" id="error_box"><br></div>
                <div>
                    <button onclick="fnLogin()" class="lb1" style="color: #FFFFFF">登录</button>
                </div>
                <div>
                    <button onclick="fnregist()" class="lb2" style="color: #FFFFFF"><a href="regist.html">注册</a>
                    </button>
                </div>

            </div>
        </div>
    </div>
</div><!-- /container -->
<script src="../static/js/TweenLite.min.js"></script>
<script src="../static/js/EasePack.min.js"></script>
<script src="../static/js/rAF.js"></script>
<script src="../static/js/demo-1.js"></script>
<script src="../static/js/login.js"></script>
<div style="text-align:center;">
</div>
</body>
</html>

 

css代码：

/* Header */
.large-header {
    position: relative;
    width: 100%;
    background: #333;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
    z-index: 1;
}

.demo-1 .large-header {
    background-image: url('../img/demo-1-bg.jpg');
}
.logo_box{
    width: 400px;
    height: 500px;
    padding: 35px;
    color: #EEE;
    position: absolute;
    left: 50%;
    top:50%;
    margin-left: -200px;
    margin-top: -250px;
}
.logo_box h3{
    text-align: center;
    height: 20px;
    font: 20px "microsoft yahei",Helvetica,Tahoma,Arial,"Microsoft jhengHei",sans-serif;
    color: #FFFFFF;
    height: 20px;
    line-height: 20px;
    padding:0 0 35px 0; 
}
.forms{
    width: 280px;
    height: 485px;
}
.logon_inof{
    width: 100%;
    min-height: 450px;
    padding-top: 35px;
    position: relative;
}        
.input_outer{
    height: 46px;
    padding: 0 5px;
    margin-bottom: 30px;
    border-radius: 50px;
    position: relative;
    border: rgba(255,255,255,0.2) 2px solid !important;
}
.u_user{
    width: 25px;
    height: 25px;
    background: url(../img/login_ico.png);
    background-position:  -125px 0;
    position: absolute;
    margin: 10px 13px;
}
.us_uer{
    width: 25px;
    height: 25px;
    background-image: url(../img/login_ico.png);
    background-position: -125px -34px;
    position: absolute;
    margin: 10px 13px;
}
.l-login{
    position: absolute;
    z-index: 1;
    left: 50px;
    top: 0;
    height: 46px;
    font: 14px "microsoft yahei",Helvetica,Tahoma,Arial,"Microsoft jhengHei";
    line-height: 46px;
}
.text{
    width: 220px;
    height: 46px;
    outline: none;
    display: inline-block;
    font: 14px "microsoft yahei",Helvetica,Tahoma,Arial,"Microsoft jhengHei";
    margin-left: 50px;
    border: none;
    background: none;
    line-height: 46px;
}
/*///*/
.mb2{
    margin-bottom: 20px
}
.mb2 a{
    text-decoration: none;
    outline: none;
}
.submit {
    padding: 15px;
    margin-top: 20px;
    display: block;
}
.act-but{
    line-height: 20px;
    text-align: center;
    font-size: 20px;
    border-radius: 50px;
    background: #0096e6;
}
.errorText{
    font: 15px "microsoft yahei",Helvetica,Tahoma,Arial,"Microsoft jhengHei";
    margin-left: 80px;
    margin-top: -10px;

}
.lb1{
    width: 330px;
    line-height: 40px;
    font-size: 15px;
    border-radius: 50px;
    background:scroll;
    margin-left: 0px;

}
.lb2{
    width: 330px;
    line-height: 40px;
    font-size: 15px;
    border-radius: 50px;
    background:scroll;
    margin-left: 0px;

}
.rb{
    width: 330px;
    line-height: 40px;
    font-size: 15px;
    border-radius: 50px;
    background:scroll;
    margin-left: 0px;
}

 

javascript代码：

function fnLogin() {
    var oUname = document.getElementById("uname")
    var oUpass = document.getElementById("upass")
    var oError = document.getElementById("error_box")
    var isError = true;
    if (oUname.value.length > 20 || oUname.value.length < 6) {
        oError.innerHTML = "用户名请输入6-20位字符";
        isError = false;
        return;
    }else if((oUname.value.charCodeAt(0)>=48) && (oUname.value.charCodeAt(0)<=57)){
        oError.innerHTML = "首字符必须为字母";
        return;
    }else for(var i=0;i<oUname.value.charCodeAt(i);i++){
        if((oUname.value.charCodeAt(i)<48)||(oUname.value.charCodeAt(i)>57) && (oUname.value.charCodeAt(i)<97)||(oUname.value.charCodeAt(i)>122)){
            oError.innerHTML = "必须为字母跟数字组成";
            return;
        }
    }

    if (oUpass.value.length > 20 || oUpass.value.length < 6) {
        oError.innerHTML = "密码请输入6-20位字符"
        isError = false;
        return;
    }
    window.alert("登录成功")
}

 

注册界面html代码：

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>登陆界面</title>
    <link rel="stylesheet" type="text/css" href="../static/css/normalize.css"/>
    <link rel="stylesheet" type="text/css" href="../static/css/demo.css"/>
    <!--必要样式-->
    <link rel="stylesheet" type="text/css" href="../static/css/component.css"/>
    <!--[if IE]>
    <script src="js/html5.js"></script>
    <![endif]-->
</head>
<body>
<div class="container demo-1">
    <div class="content">
        <div id="large-header" class="large-header">
            <canvas id="demo-canvas"></canvas>
            <div class="logo_box">
                <h3>欢迎你</h3>
                <div class="input_outer">
                    <span class="u_user"></span>
                    <input id="uname" class="text" style="color: #FFFFFF !important" type="text" placeholder="请输入账号">
                </div>
                <div class="input_outer">
                    <span class="us_uer"></span>
                    <input id="upass" class="text" style="color: #FFFFFF !important; position:absolute; z-index:100;"
                           value="" type="password" placeholder="请输入密码">
                </div>
                <div class="input_outer">
                    <span class="us_uer"></span>
                    <input id="upass1" class="text"
                           style="color: #FFFFFF !important; position:absolute; z-index:100;"
                           value="" type="password" placeholder="请再次输入密码">
                </div>

                <div class="errorText" id="error_box"><br></div>
                <div>
                    <button onclick="fnRegist()" class="rb" style="color: #FFFFFF">注册</button>
                </div>

            </div>
        </div>
    </div>
</div><!-- /container -->
<script src="../static/js/TweenLite.min.js"></script>
<script src="../static/js/EasePack.min.js"></script>
<script src="../static/js/rAF.js"></script>
<script src="../static/js/demo-1.js"></script>
<script src="../static/js/login.js"></script>
<script src="../static/js/regist.js"></script>
<div style="text-align:center;">
</div>
</body>
</html>

注册界面javascript代码：

function fnRegist() {
    var oPass = document.getElementById("upass").value;
    var oPass1 = document.getElementById("upass1").value;
    if (oPass != oPass1) {
        document.getElementById("error_box").innerHTML = "两次密码输入不一致"
    }
}

运行结果如下：

 

 

标签
js代码
background
脚本
position
input
margin
css
css样式
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!