회원 가입 이메일 아이디 유효성 검사

 

오늘은 회원 가입 시 이메일 아이디의 유효성 검사하는 방법에 대해 알아보자.

ajax를 사용해 사용자가 아이디를 입력하자마자 검사하는 방법을 사용할 것이다.

---

 

input 태그를 사용해 아이디를 입력할 곳을 만든다.

<input type="email" placeholder="아이디(이메일)" id="email">

 

 

.blur()를 사용해 input 태그가 포커스를 잃으면 함수가 적용되도록 한다.

 

https://travelof-fnqk.tistory.com/29

JavaScript - .focus(), .blur()

 

---

 

아래의 정규식을 사용해 아이디 유효성 검사를 진행할 수 있다.

.test()를 사용해 아래 정규식에 적합하면 true, 아니면 false를 반환한다.

let email_check = RegExp(/^[A-Za-z0-9_\-]+@[A-Za-z0-9\-]+\.[A-za-z0-9\-]+/);

 

 

이메일 형식으로 입력하지 않으면 이메일 형식으로 입력해달라는 메시지를 출력한다.

 

---

 

ajax를 사용해 입력한 아이디가 DB에 저장되어 있는지 확인하는 방법이다.

 

• type: 요청 방식(GET, POST, PUT, DELETE)
• url: 요청 url
• data: 전달할 파라미터
• dataType: 서버에서 반환되는 데이터 형식(text, html, xml, json, jsonp, script)
• success: ajax 통신이 성공적했을 때 실행
• error: ajax 통신에 에러가 발생했을 때 실행

 

$.ajax({
                    type:"post",
                    url:"/member/emailCheck",
                    data:{ email: email},
                    dataType: "text",
                    success:function (data){
                        let idCheck = $('.idCheck');
                        if(data === "1"){
                        	// 사용할 수 있는 아이디입니다. 출력
                        }
                        if(data === "0"){
                        	// 이미 사용 중인 아이디입니다. 출력
                        }
                    },
                    error:function(){
                        alert("에러!")
                    }
                })

 

---

 

전체 코드

$(document).ready(function(){
        $('#email').blur(function (){
            let email = $('#email').val();
            let email_check = RegExp(/^[A-Za-z0-9_\-]+@[A-Za-z0-9\-]+\.[A-za-z0-9\-]+/);
            if($.trim(email)===""){
                // 아이디를 입력해주세요 출력
            }
            else if(!email_check.test(email)){
                // 이메일 형식으로 입력해주세요 출력
            }
            else{
                $.ajax({
                    type:"post",
                    url:"/member/emailCheck",
                    data:{ email: email},
                    dataType: "text",
                    success:function (data){
                        let idCheck = $('.idCheck');
                        if(data === "1"){
                        	// 사용할 수 있는 아이디입니다. 출력
                        }
                        if(data === "0"){
                        	// 이미 사용 중인 아이디입니다. 출력  
                        }
                    },
                    error:function(){
                        alert("에러!")
                    }
                })
            }
        })
    })