ajax를 이용해서 이메일 유효성 검사 하기

우선 ajax를 사용하기 위해 라이브 러리를 가져와야 합니다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

 

※이메일 유효성 검사 하기

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        let isEmailCheck = false;
        function emailChecking(){
            // 이메일 유효성 검사
            if($("#youEmail").val() == ''){
                $("#youEmailComment").text("* 이메일을 입력해주세요!");
                $("#youEmail").focus();
                return false;
            }
            let getYouEmail =  RegExp(/^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([\-.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i);

            if(!getYouEmail.test($("#youEmail").val())){
                $("#youEmailComment").text("* 이메일 형식에 맞게 작성해주세요!");
                $("#youEmail").val('');
                $("#youEmail").focus();
                return false;
            }

            let youEmail = $("#youEmail").val();

            if(youEmail == null || youEmail == ''){
                $("#youEmailComment").text("* 이메일을 입력해주세요");
            
            }else {
                $.ajax({
                    type : "POST",
                    url : "joinCheck.php",
                    data : {"youEmail" : youEmail, "type" : "isEmailCheck"},
                    dataType : "json",

                    success : function(data){
                        if(data.result == "good"){
                            $("#youEmailComment").text("* 사용 가능한 이메일 입니다");
                            isEmailCheck = true;
                        } else {
                            $("#youEmailComment").text("* 이미 존재하는 이메일 입니다");
                            isEmailCheck = false;
                        }
                    },

                    error : function(request, status, error){
                        console.log("request" + request);
                        console.log("status" + status);
                        console.log("error" + error);
                    }
                })
            }
        }

 

- 우선 조건문으로이메일이 비어 있는지 확인합니다. 비어 있다면 에러 메시지(#youEmailComment)를 업데이트하고, 이메일 필드(#youEmail)에 포커스를 맞추고 함수를 종료합니다. 이때 함수는 false를 반환합니다.
- 이메일 주소의 형식을 정규식을 이용하여 검사합니다. 형식에 맞지 않는 경우, 에러 메시지를 업데이트하고 이메일 필드를 비우고 포커스를 맞춘 후 함수를 종료합니다. 이때 함수는 false를 반환합니다.
- 이메일 필드(#youEmail)에 입력된 값을 변수 youEmail에 저장합니다.
-  AJAX 요청을 사용하여 서버에 중복 확인 요청을 보냅니다.
- 요청의 타입을 "POST"로 설정하고, 중복 확인을 위한 서버 스크립트가 위치한 URL을 지정합니다.
-  youEmail과 type이라는 데이터를 POST 방식으로 서버에 전송합니다. youEmail은 사용자가 입력한 이메일 주소이고, type은 "isEmailCheck"로 설정되어 중복 확인 요청임을 나타냅니다.
- 서버로부터 받은 데이터의 형식을 JSON으로 지정합니다.
- 서버 요청이 성공한 경우와 실패한 경우에 대한 처리를 정의합니다.
-  success 는 서버 요청이 성공한 경우에 실행되는 코드입니다. 서버로부터 받은 데이터의 result 값이 "good"인 경우, 이메일이 사용 가능하다는 메시지를 에러 메시지에 업데이트하고, isEmailCheck 변수를 true로 설정합니다. 그렇지 않은 경우에는 이미 존재하는 이메일이라는 메시지를 에러 메시지에 업데이트하고, isEmailCheck 변수를 false로 설정합니다.
-  error 는 서버 요청이 실패한 경우에 대한 처리를 정의합니다. 콘솔에 오류 관련 정보를 출력합니다.