(김유선) 중고거래 사이트를 SPA로 만들기 3일차 - 로그인 기능

회원가입 기능

우선 어제 만들던 로그인 기능을 만들 것이다. 그 중 먼저 회원가입 기능이다.

 

어제 작성한 조건은 다음과 같다.

1. 중복되는 아이디인지 확인 후, 중복되면 중복된 아이디 사용 금지 alert창을 띄울 것

2. 두 칸 중 하나라도 빈칸이 있다면 빈칸 금지 alert 창을 띄울 것

3. 두 칸 중 하나라도 영어 외 포함이 된다면 alert (온통 영어와 숫자만 가능하게) <- 숫자도 포함하도록

4. 글자수를 8~10자로 제한할 것(8자보다 적어서도 안되고 10자보다 많아서도 안됨) <- 추가됨

 

$('#register_id').on('keyup', function() {

            $(this).val($(this).val().replace(/[^a-zA-Z0-9]/g, ''));

        });

        $('#register_pw').on('keyup', function() {

            $(this).val($(this).val().replace(/[^a-zA-Z0-9]/g, ''));

        }); // 영어와 숫자만 사용가능함

이건 처음 써보는 건데 키를 입력할때 입력한 순간 영어와 숫자 외의 것이 입력되면 그걸 빈 문자열로 바꿔주는 코드이다.

그래서 영어랑 숫자만 쓸 수 있게 됨 굿

 

$('#register_submit').click(function(){

            if($('#register_id').val()!='' && $('#register_pw').val()!=''){

                if($('#register_id').val().length>=8 && $('#register_pw').val().length>=8 && $('#register_id').val().length<=10 && $('#register_pw').val().length<=10){

                    $.get('/calluserlist')

                    .done(function(data){

                        console.log(data)

                        let sameid=0;

                        data.forEach(function(a,i){

                            if($('#register_id').val()==data[i].id){

                                sameid++;

                            }

                        })

                        if(sameid>0){

                            alert('아이디가 중복됩니다. 다른 아이디로 가입해주세요.')

                        }

                        else{

                            $.post('/register',{

                                id : $('#register_id').val(),

                                pw : $('#register_pw').val()

                            })

                            .done(function(){

                                $('.login_bg').css('display','none')

                                $('.login_container').css('display','none')

                                alert('가입을 축하드립니다!')

                            })

                        }

                    })

                }

                else{alert('아이디와 비밀번호는 각각 8~10자리로 입력해주세요.')}

            }

            else{alert('아이디 혹은 비밀번호를 입력하지 않았습니다.')}

           

        })

 

위에 작성한 조건들을 다 작성해서 이렇게 회원가입은 완성이 되었다.

몽고디비에도 이렇게 예쁘게 잘 들어온다.

 

로그인 기능

이젠 회원들이 로그인할 수 있도록 로그인 기능을 만들 것이다.

회원들의 아이디를 비교할 수 있게 또 get 요청을 해야 하는데 일단 로그인 기능까지 모두 구현한 후에 product를 포함한 모든 겟 요청을 한번에 합쳐버리도록 하겠다.(지금 합치면 헷갈릴 듯)