[javascript] 회원가입 시, 아이디 중복 확인하기 - ajax

회원가입을 조금 더 완벽하게 하기 위해서 아이디 중복 확인을 구현해보았습니다. 중복 검사 버튼을 눌렸을 경우, 동일한 아이디가 있는지 확인하고 없다면 절차를 진행하도록 합니다.

html 코드는 다음과 같습니다.

<!-- sign_up.html -->

<input type="text" class="username_input" name="username" check_result="fail" required />
<button type="button" class="id_overlap_button" onclick="id_overlap_check()">중복검사</button>
<img id="id_check_sucess" style="display: none;">

아이디를 입력하는 input, 중복 검사를 실시하는 button, 중복 검사가 완료되었을 때 표시 해주는 img 가 있다. 중복 검사전과 후 모습은 아래 이미지와 같습니다.

 

 

이제 중복검사 버튼을 클릭할 시, id_overlap_check 라는 함수가 실행되는데 이 함수를 살펴보도록 하겠습니다.

 $('.username_input').change(function () {
      $('#id_check_sucess').hide();
      $('.id_overlap_button').show();
      $('.username_input').attr("check_result", "fail");
    })

첫번째로는 아이디를 변경했을 경우에 처리입니다. 중복확인을 했더라도 아이디를 다시 수정한다면, 다시 중복확인 이미지를 숨기고 버튼을 보여줍니다. 또한 check_result를 fail 로 바꿔서 뒤에서 제출을 못하게 막습니다.

 

 if ($('.username_input').val() == '') {
      alert('이메일을 입력해주세요.')
      return;
    }

두 번째로 아무런 값도 입력하지 않은 체 중복확인 버튼을 누른 경우입니다. 간단한 알람을 띄워주고 함수는 더 이상 실행할 필요가 없습니다.

 

 id_overlap_input = document.querySelector('input[name="username"]');

    $.ajax({
      url: "{% url 'lawyerAccount:id_overlap_check' %}",
      data: {
        'username': id_overlap_input.value
      },
      datatype: 'json',

세 번째는 ajax로 처리해주는 부분입니다. 먼저 해당 url 로 data 를 넘겨줍니다. 여기서 데이터는 id_overlap_input 에서 가져온 값, 사용자가 아이디 부분에 입력한 값이 될 것입니다.

 

# views.py
def id_overlap_check(request):
    username = request.GET.get('username')
    try:
        # 중복 검사 실패
        user = User.objects.get(username=username)
    except:
        # 중복 검사 성공
        user = None
    if user is None:
        overlap = "pass"
    else:
        overlap = "fail"
    context = {'overlap': overlap}
    return JsonResponse(context)   

이에 대해서 값을 입력받고 중복 검사를 실시합니다. 중복 검사는 예외 처리를 이용해서 해당 아이디의 user가 없을 경우 pass 를 있을 경우 fail 을 다시 json 으로 넘겨주었습니다.

 

success: function (data) {
        if (data['overlap'] == "fail") {
          alert("이미 존재하는 아이디 입니다.");
          id_overlap_input.focus();
          return;
        } else {
          alert("사용가능한 아이디 입니다.");
          $('.username_input').attr("check_result", "success");
          $('#id_check_sucess').show();
          $('.id_overlap_button').hide();
          return;
        }
      }
    });

data가 성공적으로 넘어왔으면 success 이후를 실행합니다. view 에서 넘어온 데이터가 fail 이라면 알람과 함께 포커스를 다시 아이디 입력창으로 이동하고, pass 라면, check_result 를 success로 바꿔줘서 후에 submit 시 통과 하도록 해줍니다. 다시 버튼을 누를 일이 없으므로 버튼은 숨기고 중복확인 되었다는 이미지는 띄워주도록 합니다.

 

  function id_overlap_check() {

    $('.username_input').change(function () {
      $('#id_check_sucess').hide();
      $('.id_overlap_button').show();
      $('.username_input').attr("check_result", "fail");
    })


    if ($('.username_input').val() == '') {
      alert('이메일을 입력해주세요.')
      return;
    }

    id_overlap_input = document.querySelector('input[name="username"]');

    $.ajax({
      url: "{% url 'lawyerAccount:id_overlap_check' %}",
      data: {
        'username': id_overlap_input.value
      },
      datatype: 'json',
      success: function (data) {
        console.log(data['overlap']);
        if (data['overlap'] == "fail") {
          alert("이미 존재하는 아이디 입니다.");
          id_overlap_input.focus();
          return;
        } else {
          alert("사용가능한 아이디 입니다.");
          $('.username_input').attr("check_result", "success");
          $('#id_check_sucess').show();
          $('.id_overlap_button').hide();
          return;
        }
      }
    });
  }

id_overlap_check 의 전체적인 코드는 다음과 같습니다.

 

  if ($('.username_input').attr("check_result") == "fail"){
    alert("아이디 중복체크를 해주시기 바랍니다.");
    $('.username_input').focus();
    return false;
  }

제출 시, 아이디 중복체크가 되지않았으면 오류 알람 띄워주도록 fail 일 경우에는 알람을 띄우고 submit을 하지 못하도록 return 시키도록 합니다.