티스토리 뷰

HTML&CSS&Javscript&Jquery

190823 두번째 문제-회원가입/로그인 구현

猫猫 2019. 8. 23. 17:15
반응형
<!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>
    <style>
            label {
                display: inline-block;
                width: 140px;
                text-align: left;
            }
    
    </style>
    <script  src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
        var acc={}; //키, 밸류 저장할 객체
        var accs=[]; //객체 관리 할 배열
        ////////////////////////////기능

        /////////////////////////로그인 체크
        function chkInfo(chkid,chkpw){ 
            var flag = false; //체크할 플래그
            $.each(accs, function(i){ //each로 accs배열을 i번만큼 돌릴것.
                if(accs[i].id==chkid){ //만약 배열의i번째 id와 내가 입력한 id가 같으면
                    if(accs[i].pw==chkpw){ //i번째 pw와 내가 입력한 pw가 같은지 체크
                        flag=true; //flag 는 true로 바꾸자
                        console.log("success");//성공하면 보여질 콘솔 로그
                        return false; //each문을 빠져나가자 (반복문의 break기능)
                    }
                    else{ //만약 패스워드가 틀렸다면
                        console.log("chk your pw"); // 아이디는 맞은거니까 패스워드 체크하라고 알려줌
                        flag=true; //flag는 트루로.
                        return false; //each문을 빠져나가자 (반복문의 break기능)
                    }
                }
                else { //아이디가 배열에 없다
                    flag = false; //플래그를 false로 바꿔준다.
                    return true; //each문을 계속 돌린다(반복문의 continue기능)
                }
                if(flag==false) console.log("Has no id"); 
                //ㄹㅇㄹㅇflag가 false라는 소리는 정말로 id가 배열내에 하나도 없다는 이야기다. 
                //왜냐면 배열안의 id가 하나라도 있다면 flag는 true로 변경된다. 

            });
        }
        //////////////////////////////중복 id 체크
        function chkNewId(newid){ 
            var flag=false; //플래그를 줍시다.
            for(var i=0; i<accs.length;i++){ //생성된 객체배열만큼만 돌것이다.              
                if(accs[i].id==newid){ //만약 새로운 아이디와 기존에 있던 아이디가 같으면
                    flag=true;  //플래그는 true로
                    return true; //리턴도 참을 리턴
                    break; //반복문 빠져나가자
                }
                else { //입력받은 아이디와 기존 배열의 아이디가 없다면
                    flag=true; //flag는 트루로
                    continue; //반복문을 계속돌리자
                }
                if(flag==false) return false;
                //flag가 ㄹㅇ false라는것은 ㄹㅇㄹㅇ 없다는 뜻. 
                //return도 false를 주자.                
            }            
        }

        ///////////////////////정보 추가
        function addInfo(id,name,pw){ //배열에 객체 추가하는 기능          
            acc={"id":id,"name":name,"pw":pw};
            accs.push(acc);            
            console.log(accs);                    
        }

        $(document).ready(function(){
            /////////////회원가입
            $("#form").submit(function(){ //form에 submit이 일어났을때 실행
               var id=$("#id").val(); 
               var name = $("#name").val();
               var pw = $("#pw").val();                              

                if(id!=""&&name!=""&&pw!=""){ //id,name,pw에 공백 허용 안함
                    if(chkNewId(id)) { //id가 중복인지 체크하고 그 리턴값으로 판단.
                        alert("someone already taken that.");  //리턴값이 true이면 중복아이디가 있다는 것.
                                                               //alert으로 중복 값이라고 알려줌
                        $("#id").val(""); //새로 작성하시라고 공백 만들어 드립니다.
                     } 
                    else addInfo(id,name,pw);//아닌경우 중복값 없다는 뜻 새로 등록 해드립시다.
                }
                else alert("Not allowed null"); //null 입력하지 마세여 
               
                return false;               
            });
        //////////////////log in
            $("#login").click(function(){ //login버튼 클릭했을 때,         
               var chkId = $("#chkId").val(); 
               var chkPw = $("#chkPw").val();

               if(chkId!=""&&chkPw!=""){ //null값이면 말이 안됨
                   chkInfo(chkId,chkPw)  //chkinfo 기능에 받아온 chkid와 chkpw를 던지자                        
               }
               else alert("Not allowed null"); //null값 허용 안한다
            });

        });
    </script>
</head>
<body>
    <form name="sign" id="form">
        <fieldset>
            <legend>Sign in</legend>
        <div>
            <label>ID: </label>
            <input type="text" id="id" onkeydown="">
        </div>
        <div>
            <label>NAME: </label>
            <input type="text" id="name">

        </div>        
        <div>
            <label>Password: </label>
            <input type="password" id="pw">
        </div>
        <div>
            <label></label>
            <input type="submit" value="Sign in" id="sign">
        </div>
    </fieldset>
    <fieldset>
        <legend>Log in</legend>
        <div>
            <label>ID: </label>
            <input type="text" id="chkId">
        </div>
        <div>
            <label>Password: </label>
            <input type="password" id="chkPw">
        </div>
            <label></label>
            <input type="button" value="Log in" id="login">
        </div>
    </fieldset>
        

    </form> 
</body>
</html>

로그인 체크, 중복 id체크 때문에 애먹었다. 

 

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

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

190822 장바구니 / 장바구니 비우기 구현  (0) 2019.08.23
190822 select 이벤트, textarea 연습  (0) 2019.08.23
190823 첫번째 문제  (0) 2019.08.23
190823 each문 써서 리터럴객체 배열에 등록하기  (0) 2019.08.23
190820 과정평가형 시험 예상문제  (0) 2019.08.20