[개인프로젝트] [6] 회원가입 - id 중복체크 (ajax)

Node.js - 회원가입처리 (ID중복체크)

오늘은 회원가입처리를 시작하면서 ID중복체크를 ajax 통신으로 처리하였던 것을 기록한다.

기존에 익숙했던 java의 흐름과 비슷하기는 하지만 Node 환경에서 기존에 알고있던 것을 처리하는 것도 색다르고 흥미가 생기게 되는 것 같다.

---

 

아래 로그인화면에 회원가입 버튼을 붙여주었고 [회원가입] 버튼을 누르면 회원가입 페이지로 이동한다.

 

 

1. 회원가입 화면 이벤트 처리

 

먼저 ID중복확인에 대한 처리를 [중복확인] 버튼을 만들어 처리를 하려고 onclick 이벤트로 처리를 하려다가 

커서가 벗어났을 경우에 아래에 text로 뿌려주는 것이 적합할 것 같아 onfocusout 이벤트로 처리를 하였다.

 

 

signup.ejs

<!-- 회원가입 페이지 -->

<h1 id="title" class="h2 mb-4"><%= title %></h1>
    
<form class="" action="/auth/signup_process", method="post">
    <div class="form-floating mb-3">
        <input type="text" class="form-control id_confirm" id="signup_id" name="id" placeholder="아이디">
        <label for="floating Input">아이디</label>
        <div id="id_div"></div>
    </div> 
    <div class="form-floating mb-3">
        <input type="password" class="form-control" id="signup_pwd1" name="pwd" placeholder="비밀번호">
        <label for="signup_pwd1">비밀번호</label>
    </div>
    <div class="form-floating mb-3">
        <input type="password" class="form-control" id="signup_pwd2" name="pwd2" placeholder="비밀번호확인">
        <label for="signup_pwd2">비밀번호확인</label>
    </div>

</form>

 

script -> focusout Event

<script type="text/JavaScript">
    $(document).ready(function() {

        /* --------------------------------------------------------------------
         * 함수명   : ID [중복확인] 버튼 FOCUS OUT EVENT
         * 내용     : [중복확인] 버튼 FOCUS OUT 시 ID 중복확인을 진행한다(Ajax).
         * -------------------------------------------------------------------- */
        $(".id_confirm").on("focusout", function() {
            var id = $('input[name=id]').val();

            // 빈 값 체크
            if(id == '' || id.length == 0) {
                alert("아이디를 입력해주세요."); 
                return false;
            }

            // 길이 체크
            if(id.length < 5) {
                alert("아이디를 5글자 이상 입력해주세요.");
                return false;
            }

            $.ajax({
                url : "/auth/signup/id_confirm",
                type : "POST",
                dataType : "JSON",
                data : {"id" : id}
            })

            .done(function(json){

                if(json.succYn == "Y" && json.cnt == 0){
                    $('#id_div').html('<a">사용가능한 ID입니다.</a>');
                }else {
                    $('#id_div').html('<a style="color: red;">사용불가능한 ID입니다.</a>');
                }

            })

            .fail(function(xhr, status, errorThrown){
                console.log("Ajax 실패 : " + errorThrown);
                $('#id_div').html('<a style="color: red;">통신중 오류가 발생하였습니다.</a>');
            })
        });

    });
</script>

 

sql mapper

<select id="selectCsIdConfirm">
    SELECT
      COUNT(*) AS cnt
      FROM TM_CS
     WHERE CS_ID = #{csId}
</select>

 

 

2. 결과

 

아이디 입력 후 focus out을 하게되면 기존에 있는 id의 경우에 위와 같이 화면에 뿌려준다.

 

위처럼 기존에 존재하지 않는 경우 사용가능한 ID라고 한다.

 

---

우선 ID 중복체크 후 화면에 뿌려주는 용도까지만 되어있지만 추가로 해당 중복체크 여부 등을 따로 담아두었다가 실제 회원가입처리를 할 때에 해당 데이터를 활용해 처리 할 예정이다.