完成登陸與註冊界面的前端

時間 2019-11-15

標籤完成登陸註冊界面前端简体版

原文原文鏈接

完成登陸與註冊頁面的HTML+CSS+JS，其中的輸入項檢查包括：javascript

用戶名6-12位css

首字母不能是數字html

只能包含字母和數字html5

密碼6-12位java

註冊頁兩次密碼是否一致canvas

html代碼：ui

<!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代碼：url

/* 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代碼：spa

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代碼：3d

<!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 = "兩次密碼輸入不一致"
    }
}

運行結果以下：