完成登錄與注冊頁面的前端

本文轉載自查看原文 2017-11-01 20:41 8934

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

用戶名6-12位

首字母不能是數字

只能包含字母和數字

密碼6-12位

注冊頁兩次密碼是否一致

登錄頁面HTML代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登錄</title>
    <link rel="stylesheet" type="text/css" href="../static/css/xin.css">
    <script src="../static/js/dl.js"></script>


</head>
<body bgcolor="#ffe4c4">

<div class="box">
    <div id="tittle"><h2 align="center">登錄</h2></div>
    <p class="input_box">
        賬戶： <input id="uname" type="text" placeholder="請輸入您的賬戶">
    </p>
    <p class="input_box">
        密碼： <input id="upass" type="password" placeholder="請輸入您的號碼">
    </p>

    <div id="error_box"><br></div>
    <div class="button"><button onclick="foLogin()">登錄</button></div>
   <h4 align="center"> <a href="注冊.html">沒有賬號？點我啊</a></h4>

</div>

</body>
</html>

登錄頁面JS代碼如下：

function foLogin() {
            var oUname = document.getElementById("uname");
            var oError = document.getElementById("error_box");
            var oUpass = document.getElementById("upass");

            var isError = true;
            oError.innerHTML = "<br>";

            if (oUname.value.length < 6 || oUname.value.length > 12) {
                oError.innerHTML = "用戶名要6-12位";
                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.length;i++){
               if((oUname.value.charCodeAt(i)<48)||(oUname.value.charCodeAt(i)>57)&&(oUname.value.charCodeAt(i)<58)&&(oUname.value.charCodeAt(i)>97)){
                oError.innerHTML="只能為數字和字母";
                return;
            }
            }
            if (oUpass.value.length < 6 || oUpass.value.length > 12) {
                oError.innerHTML = "密碼要6-12位";
                isError = false;
                return;
            }
        }

CSS代碼如下：

h2 {
    font-family: 宋體;
    font-size: 28px;
    text-align: center;
    background: #cccccc;
    margin-top: auto;
    height: 30px;
    width: 500px;
}
.box {
    border: 1px solid #000000;
    height: 370px;
    width: 500px;
    float: left;
    margin: 50px;
 margin-left: 30%;
}

.input_box{
    text-align: center;
    height: 30px;
    width: 500px;

}
input {
    align-self: center;
    height: 30px;
    width: 300px;
}

button{

    font-size: 22px;
    width: 360px;
    height: 30px;
    align-self: center;
   margin-bottom: auto;
   background: #cccccc;
margin-left: 15%;



}

注冊頁面html代碼如下：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注冊</title>
    <link rel="stylesheet" type="text/css" href="../static/css/xin.css">
    <script src="../static/js/5.js"></script>


</head>
<body bgcolor="#ffe4c4">

<div class="box">
    <div id="tittle"><h2 align="center">注冊</h2></div>
    <p class="input_box">
        賬戶： <input id="uname" type="text" placeholder="請輸入您的昵稱">
    </p>
    <p class="input_box">
        密碼： <input id="upass" type="password" placeholder="請設置您的密碼">
    </p>
    <p class="input_box">
       驗證：  <input id="upass1" type="password" placeholder="請再次輸入密碼">
    </p>
     <p class="input_box">
        郵箱： <input id="youxiang" type="password" placeholder="請輸入您的郵箱">
    </p>

    <div id="error_box"><br></div>
    <div class="button"><button onclick="foLogin()">立即注冊</button></div>
    <h4 align="center"> <a href="5.html">已有賬號請登錄</a></h4>


</div>

</body>
</html>

注冊頁面JS代碼如下：

function foLogin() {
            var oUname = document.getElementById("uname");
            var oError = document.getElementById("error_box");
            var oUpass = document.getElementById("upass");
            var oUpass1 = document.getElementById("upass1");
            var isError = true;
            oError.innerHTML = "<br>";

            if (oUname.value.length < 6 || oUname.value.length > 12) {
                oError.innerHTML = "用戶名要6-12位";
                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.length;i++){
               if((oUname.value.charCodeAt(i)<48)||(oUname.value.charCodeAt(i)>57)&&(oUname.value.charCodeAt(i)<58)&&(oUname.value.charCodeAt(i)>97)){
                oError.innerHTML="只能為數字和字母";
                return;

            }}
            if (oUpass.value.length < 6 || oUpass.value.length > 12) {
                oError.innerHTML = "密碼要6-12位";
                isError = false;
                return;
            }else if(oUname.value!=oUpass1.value) {
                oError.innerHTML = "設置密碼和驗證密碼不一致";
                return;
            }
            }

運行結果如下：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 完成登錄與注冊頁面的前端完成登錄與注冊頁面的前端完成登錄與注冊頁面的前端登錄注冊頁面二：登錄頁面和注冊頁面的前台和后台登錄注冊頁面登錄注冊頁面登錄,注冊頁面的驗證碼完成登錄與注冊界面的前端登錄注冊頁面模板匯總WEB前端(50套)