티스토리 뷰

HTML&CSS&Javscript&Jquery

190822 회원가입/로그인 Javascript로 구현하기

猫猫 2019. 8. 23. 17:25
반응형

<메인화면>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script  src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
    <ul>
        <li>
            <a href="190822_joinform.html">Join us</a>
        </li>                  
    </ul>
    <a href="190822_joinform.html">
    <img src="./images/newacc.PNG" alt="newaccount"></a>
    
    <a href="190822_loginform.html"><img src="images/sign.PNG" alt="login"></a>
</body>
</html>

그냥 심심해서 이미지 넣은것이니 대충 아무 이미지 갖다 넣으면 된다. 

 

 

<회원가입 폼>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script  src="http://code.jquery.com/jquery-latest.min.js"></script>
    <style>
        label {
            display: inline-block;
            width: 140px;
            text-align: left;
        }

    </style>
    <script>
        function resetForm(){
            $("#name").val();
            $("#id").val();
            $("#password").val();
            $("#passwordchk").val();
            $("#add").val();
            $("#year").val("1990");
            $("#month").val("06");                
            $("#day").val("13");
            $("#job").val("student");
        }

        function sendData(){
                var id = $("#id").val();    
                window.location="190822_newWelcome.html?id="+id;            
        }
        function chkPassword(){
            var pw = $("#password").val();
            var pw2 = $("#passwordchk").val();

            if(pw==pw2) return true;
            else return false;
        }

        var Month = "";
        var day="";

        function a(m,d){
            if(m=="12" && d=="31") alert("end of the year");
        }

        $(document).ready(function(){

            $("#month").change(function(){
                Month = $("#month option:selected").val();    
                a(Month, day);     
            });
            $("#day").change(function(){
                day = $("#day option:selected").val();
                a(Month, day);    
            });            
       
            $("#reset").click(function(){
                resetForm();
            });

            $("#confirm").click(function(){
                if(chkPassword()){
                    sendData();
                }
                else alert("비밀번호 불일치");                
            });
        });

        
    </script>
</head>
<body>
    <form>
        <div>
        <label>이름</label>
        <input type="text", value="", id="name" name="name">
        </div>
        <div>
        <label>아이디</label>
        <input type="text", value="", id="id" name="id">        
        </div>
        <div>            
        <label>비밀번호</label>
        <input type="password", value="", id="password">   
        </div>
        <div>
        <label>비밀번호확인</label>
        <input type="password", value="", id="passwordchk">    
        </div>
        <div>
        <label>주소</label>
        <input type="text", value="", id="add">
        </div>
        <div>
        <label>생년월일</label>
        <select name="year" id="year" class="year">
            <option value="1985">1985</option>
            <option value="1986">1986</option>
            <option value="1987">1987</option>
            <option value="1988">1988</option>
            <option value="1989">1989</option>
            <option value="1990" selected="selected">1990</option>
            <option value="1991">1991</option>
            <option value="1992">1992</option>
            <option value="1993">1993</option>
            <option value="1994">1994</option>
        </select>
        년
        <select name="month" id="month" class="month">
            <option value="01">01</option>
            <option value="02">02</option>
            <option value="03">03</option>
            <option value="04">04</option>
            <option value="05">05</option>
            <option value="06" selected="selected">06</option>
            <option value="07">07</option>
            <option value="08">08</option>
            <option value="09">09</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
        </select>
        월
        <select name="day" id="day" class="day">
            <option value="01">01</option>
            <option value="02">02</option>
            <option value="03">03</option>
            <option value="04">04</option>
            <option value="05">05</option>
            <option value="06">06</option>
            <option value="07">07</option>
            <option value="08">08</option>
            <option value="09">09</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>  
            <option value="13" selected="selected">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
            <option value="17">17</option>
            <option value="18">18</option>
            <option value="19">19</option>
            <option value="20">20</option>
            <option value="21">21</option>
            <option value="22">22</option>
            <option value="23">23</option>
            <option value="24">24</option>
            <option value="25">25</option>
            <option value="26">26</option>
            <option value="27">27</option>
            <option value="28">28</option>
            <option value="29">29</option>
            <option value="30">30</option>
            <option value="31">31</option>          
        </select>
        일
        </div>
        <div>
        <label>직업</label>
        <select name="job">
            <option value="student">학생</option>
            <option value="employee">회사원</option>
            <option value="no">무직</option>
        </select>         
    
        </div>
        <div>
            <label></label>
            <input type="button" value="confirm" id="confirm">
            <input type="reset" value="reset" id="reset">
        </div>   
    </form>
    
</body>
</html>

 

<로그인 폼>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script  src="http://code.jquery.com/jquery-latest.min.js"></script>
    <style>
            label {
                display: inline-block;
                width: 140px;
                text-align: left;
            }
    
    </style>
<body>
    <form action="190822_loginchk.html">
        <div>
        <label>아이디</label>
        <input type="text" id="id" name="id">
        </div>
        <div>
        <label>비밀번호</label>
        <input type="password" id="pw" name="pw">
        </div>        
        <div><input type="submit" value="Submit"></div>
    </form> 
        
</body>
</html>

<로그인 체크 폼>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script  src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
        var Request = function()
        {
            this.getParameter = function( name )
            {
                var rtnval = "";
                var nowAddress = unescape(location.href);
                var parameters = (nowAddress.slice(nowAddress.indexOf("?")+1,nowAddress.length)).split("&");

                for(var i = 0 ; i < parameters.length ; i++)
                {
                    var varName = parameters[i].split("=")[0];
                    if(varName.toUpperCase() == name.toUpperCase())
                    {
                        rtnval = parameters[i].split("=")[1];
                        break;
                    }
                }
                return rtnval;
            }
        }   
        var request = new Request();
           
            // 0: 인증 가능 사용자 및 비밀번호 목록.
            var users = ["ninja","knight", "elf"];
            var passwords = ["ak74", "m4", "pgs11"];
            // 1: form 으로부터 전달된 데이터를 변수에 저장.
            
            var id = request.getParameter("id");
            var pw = request.getParameter("pw");

            var redirectUrl = "190822_welcome.html";
            // 2: 사용자 인증
            
            for (var i = 0; i < users.length; i++) {          

                if (users[i]==id && passwords[i]==pw){
                    redirectUrl = "190822_welcome.html?id=" + id; // 인증 성공 시 재 요청 url
                    window.location.href=redirectUrl;
                    break;
                }
                else {
                   alert("log in falied");
                   window.location.href =  "190822_loginform.html";
                   break;
                }
            }
    </script>
</head>
<body>
    
</body>
</html>

<로그인 성공 창>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script  src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
        var Request = function()
        {
            this.getParameter = function( name )
            {
                var rtnval = "";
                var nowAddress = unescape(location.href);
                var parameters = (nowAddress.slice(nowAddress.indexOf("?")+1,nowAddress.length)).split("&");

                for(var i = 0 ; i < parameters.length ; i++)
                {
                    var varName = parameters[i].split("=")[0];
                    if(varName.toUpperCase() == name.toUpperCase())
                    {
                        rtnval = parameters[i].split("=")[1];
                        break;
                    }
                }
                return rtnval;
            }
        }    
        
        var request = new Request();
        var id = request.getParameter("id");
        
        document.write("welcome  "+id +" !");

    </script>
</head>
<body>
        
        <a href="190822_loginform.html">로그아웃</a>
</body>
</html>

데이터 파싱을 안배웠는데.. 

데이터 파싱을 하래서 당황함..

그것도 php나 jsp가 아니라 js로 구현하려니 인터넷을 미친듯이 뒤졌다. 

 

반응형
저작자표시 비영리 변경금지

'HTML&CSS&Javscript&Jquery' 카테고리의 다른 글

190819 reduce  (0) 2019.08.23
190819 map 예제  (0) 2019.08.23
190822 장바구니 / 장바구니 비우기 구현  (0) 2019.08.23
190822 select 이벤트, textarea 연습  (0) 2019.08.23
190823 두번째 문제-회원가입/로그인 구현  (0) 2019.08.23