php로 홈페이지 만들기_AJAX를 이용한 유효성 검사

AJAX를 이용한 유효성 검사

AJAX를 이용한 유효성 검사는 서버와 비동기적으로 데이터를 주고받으며, 화면 전환 없이 유효성 검사를 수행할 수 있습니다. 일반적으로 웹 페이지에서 입력 필드를 제출할 때, 전체 폼이 서버로 전송되어 페이지가 새로고침되는데 반해, AJAX를 이용하면 입력 필드의 값을 서버로 전송하고, 서버에서 검증 결과를 돌려주는 과정에서 페이지가 새로고침되지 않습니다. 이 방법은 사용자 경험을 향상시키는 데 큰 역할을 합니다.

예를 들어, 회원 가입 페이지에서 유효성 검사를 수행하는 경우, 사용자가 입력한 값들이 올바른지 서버에서 검증하고, 검증 결과에 따라 사용자에게 적절한 메시지를 표시할 수 있습니다. 이를 통해 사용자는 빠르게 오류를 수정하고, 올바른 값을 제출할 수 있게 됩니다. 또한, AJAX를 이용하면 입력 필드가 변경될 때마다 검증을 수행할 수 있어, 실시간으로 오류를 감지하고, 적절한 메시지를 표시할 수 있습니다.

 

 

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

        function emailChecking(){
            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);
                    }
                })
            }
        }

        function joinChecks(){
            //이름 유효성 검사
            if($("#youName").val() ==''){
                $("#youNameComment").text("* 이름을 입력해 주세요")
                $("#youName").focus(); 
                return false;
            }
            let getYouName = RegExp(/^[가-힣]+$/)
            if(!getYouName.test($("#youName").val())){
                $("#youNameComment").text("* 이름을 한글만 사용가능합니다.")
                $("#youName").val('')
                $("#youName").focus(); 
                return false;
            }

            // 이메일 유효성 검사
            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;
            }
        }
    </script>

emailChecking() 함수는 이메일 중복 검사를 수행합니다. 이메일이 입력되었는지 확인하고, 이메일이 입력되지 않았다면 해당 내용을 출력합니다. 이메일이 입력되었다면, AJAX를 통해 서버에 youEmail 값과 type 값을 전송합니다. type 값은 이메일 중복 검사인지 여부를 나타내며, isEmailCheck 변수에 저장됩니다. 서버로부터 받은 JSON 데이터의 result 값에 따라 이메일 중복 검사 결과를 출력하고, isEmailCheck 값을 업데이트합니다.

joinChecks() 함수는 회원 가입 버튼을 눌렀을 때 각 필드의 유효성을 검사합니다. 먼저, 이름이 입력되었는지 확인하고, 이름이 입력되지 않았다면 해당 내용을 출력합니다. 그리고, 입력된 이름이 한글인지 확인하고, 한글이 아니라면 해당 내용을 출력합니다. 이어서 이메일이 입력되었는지 확인하고, 이메일이 입력되지 않았다면 해당 내용을 출력합니다. 이메일이 입력되었다면, 이메일 형식이 맞는지 확인하고, 이메일 형식에 맞지 않는 경우 해당 내용을 출력합니다.