HTML登陸註冊頁面簡單實現

時間 2019-11-08

標籤 html 登陸註冊頁面簡單實現欄目 HTML 简体版

原文原文鏈接

github：傳送門，碼雲：傳送門css

效果參考：登陸頁面，註冊頁面html

使用了bootstrap，jQuery。jquery

後端使用的CGI處理表單，存入MySQL數據庫。（以後更新）git

登陸頁面源碼github

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>login</title>
<script src="js/jquery-2.2.3.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<link type="text/css" href="css/jquery-ui.min.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>

<link type="text/css" href="css/login.css" rel="stylesheet">
<script src="js/my.js"></script>
<SCRIPT language = "JavaScript">
    function checkUserName(){    //驗證用戶名
        var fname = document.myform.username.value;
        var reg=/^[0-9a-zA-Z]/;
        if(fname.length != 0){
            for(i=0;i<fname.length;i++){
                if(!reg.test(fname)){
                    alert("只能輸入字母或數字");
                    return false;}
            }
            if(fname.length<4||fname.length>16){
                alert("只能輸入4-16個字符")
                return false;
            }
        }
        else{    alert("請輸入用戶名");
            document.myform.username.focus();
            return false     }
        return true;
    }

    function passCheck(){ //驗證密碼
        var userpass = document.myform.password.value;
        if(userpass == ""){
            alert("未輸入密碼 \n" + "請輸入密碼");
            document.myform.password.focus();
            return false;   }
        if(userpass.length < 6||userpass.length>12){
            alert("密碼必須在 6-12 個字符。\n");
            return false;   }
        return true;   }

    function passCheck2(){
        var p1=document.myform.password.value;
        var p2=document.myform.password2.value;
        if(p1!=p2){
            alert("確認密碼與密碼輸入不一致");
            return false;
        }else{
            return true;
        }
    }

    function checkEmail(){
        var Email = document.getElementById("email").value;
        var e = Email.indexOf("@"&&".");
        if(Email.length!=0){
            if(e>0){
                if(Email.charAt(0)=="@"&&"."){
                    alert("符號@和符號.不能再郵件地址第一位");
                return false;
                }
                else{
                    return true;
                }
            }
            else{
                alert("電子郵件格式不正確\n"+"必須包含@符號和.符號！");
                return false;
            }
        }
        else{
            alert("請輸入電子郵件！")
            return false;
        }
    }

    function checkbirthday(){    //驗證用戶名
        var year = document.myform.birthday.value;
        if(year < 1949 || year > 2007){
            alert("年份範圍從1949-2007年");
            return false;}
        return true;     }


    function validateform(){
        if(checkUserName()&&passCheck( )&&passCheck2()&&checkEmail()&&checkbirthday())
                return true;
        else
            return false;
    }

    function clearText( ) {
        document.myform.user.value="" ;
        document.myform.password.value="" ;
    }

    //顯示隱藏對應的密碼輸入框:
    $(function(){
        // 經過jqurey修改
        $("#passwordeye").click(function(){
            let type =  $("#password").attr('type')
            if(type === "password"){
                $("#password").attr("type","text");
            }else{
                $("#password").attr("type","password");
            }
        });
    });


</SCRIPT>
</head>
<body>
<img src="img/login_bg.jpg" class="bg">
<div id="head">
    <img src="img/login_head.png" width=100% height=auto />
</div>
<div id="center">
<form name="myform" onSubmit="return validateform( )" enctype="multipart/form-data" action="cgi-bin/login.cgi" method="post" >
    <div class="input-group">
        <h3>用戶名：</h3>&nbsp;<input class="form-control" id="username" name="username" type="text"  style="height:40px" value="" placeholder="只能輸入字母或數字，4-16個字符"/>
    </div>
    <div class="input-group">        
        <h3>密&nbsp;&nbsp;&nbsp;碼：</h3>&nbsp;<input class="form-control" id="password" name="password" type="password" style="height:40px"  value="" placeholder="密碼長度6-12位"/>
        <span class="input-group-btn">
            <INPUT class="btn btn-default" id="passwordeye" type="button" value="show/hide"">
        </span>
    </div>

    <div id="btn">
        <INPUT class="btn btn-primary" name="loginButton" type="submit" id="Button" value="登錄"  onclick="checkUserName()">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="register.html"><INPUT class="btn btn-primary" name="registerButton" id="Button" type="button" value="註冊"></a>
    </div>
</form>
</div>
<div id="bottom">
    <div class="footer" style="color:white;">
         Copyright &copy; 2013-2019 All Rights Reserved. 備案號：
    </div>
</div>
</body>
</html>

View Code

註冊頁面源碼數據庫

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>register</title>
<script src="js/jquery-2.2.3.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<link type="text/css" href="css/jquery-ui.min.css" rel="stylesheet">
<link type="text/css" href="css/register.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
<script src="js/my.js"></script>
<SCRIPT language = "JavaScript">
    function checkUserName(){    //驗證用戶名
        var fname = document.myform.username.value;
        var reg=/^[0-9a-zA-Z]/;
        if(fname.length != 0){
            for(i=0;i<fname.length;i++){
                if(!reg.test(fname)){
                    alert("只能輸入字母或數字");
                    return false;}
            }
            if(fname.length<4||fname.length>16){
                alert("只能輸入4-16個字符")
                return false;
            }
        }
        else{    alert("請輸入用戶名");
            document.myform.username.focus();
            return false     }
        return true;
    }

    function passCheck(){ //驗證密碼
        var userpass = document.myform.password.value;
        if(userpass == ""){
            alert("未輸入密碼 \n" + "請輸入密碼");
            document.myform.password.focus();
            return false;   }
        if(userpass.length < 6||userpass.length>12){
            alert("密碼必須在 6-12 個字符。\n");
            return false;   }
        return true;   }

    function passCheck2(){
        var p1=document.myform.password.value;
        var p2=document.myform.password2.value;
        if(p1!=p2){
            alert("確認密碼與密碼輸入不一致");
            return false;
        }else{
            return true;
        }
    }

    function checkEmail(){
        var Email = document.getElementById("email").value;
        var e = Email.indexOf("@"&&".");
        if(Email.length!=0){
            if(e>0){
                if(Email.charAt(0)=="@"&&"."){
                    alert("符號@和符號.不能再郵件地址第一位");
                return false;
                }
                else{
                    return true;
                }
            }
            else{
                alert("電子郵件格式不正確\n"+"必須包含@符號和.符號！");
                return false;
            }
        }
        else{
            alert("請輸入電子郵件！")
            return false;
        }
    }

    function checkbirthday(){    //驗證用戶名
        var year = document.myform.birthday.value;
        if(year < 1949 || year > 2007){
            alert("年份範圍從1949-2007年");
            return false;}
        return true;     }


    function validateform(){
        if(checkUserName()&&passCheck( )&&passCheck2()&&checkEmail()&&checkbirthday())
                return true;
        else
            return false;
    }

    function clearText( ) {
        document.myform.user.value="" ;
        document.myform.password.value="" ;
    }

    //顯示隱藏對應的switchPwd()方法:
    $(function(){
        // 經過jqurey修改
        $("#passwordeye").click(function(){
            let type =  $("#password").attr('type')
            if(type === "password"){
                $("#password").attr("type","text");
            }else{
                $("#password").attr("type","password");
            }
        });
        $("#passwordeye2").click(function(){
            let type =  $("#password2").attr('type')
            if(type === "password"){
                $("#password2").attr("type","text");
            }else{
                $("#password2").attr("type","password");
            }
        });
    });

</SCRIPT>
</head>
<body>
<img src="img/login_bg.jpg" class="bg">
<div id="head">
    <img src="img/register_head.png" width=100% height=auto />
</div>
<div id="center">
<form name="myform" onSubmit="return validateform( )" enctype="multipart/form-data" action="cgi-bin/register.cgi" method="post" >
    <div class="input-group">
        <h3>用&nbsp;&nbsp;戶&nbsp;&nbsp;名：</h3><input class="form-control"  id="username" name="username" type="text"  style="height:40px" value=""  placeholder="只能輸入字母或數字，4-16個字符"/>
    </div>        
    <div class="input-group">
        <h3>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;碼：</h3><input class="form-control"  id="password" name="password" type="password" style="height:40px" value=""  placeholder="密碼長度6-12位"/>
        <span class="input-group-btn">
            <INPUT class="btn btn-default" id="passwordeye" type="button" value="show/hide"">
        </span>
    </div>
    <div class="input-group">
        <h3>確認密碼：</h3><input class="form-control"  id="password2" name="password2" type="password" style="height:40px" value=""/>
        <span class="input-group-btn">
            <INPUT class="btn btn-default" id="passwordeye" type="button" value="show/hide"">
        </span>
    </div>     
    <div id="btn">
        <INPUT name="registerButton"  class="btn btn-primary" type="submit" id="Button" value="註冊"  onclick="checkUserName()">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    
        <a href="login.html"><INPUT  class="btn btn-primary" name="loginButton" id="Button" type="button" value="登陸"></a>
    </div>
</form>
</div>
<div id="bottom">
    <div class="footer" style="color:white;">
         Copyright &copy; 2013-2019 All Rights Reserved. 備案號：
    </div>
</div>
</body>
</html>