유효성 검사하기 1편

AJAX란?

 

AJAX는 "Asynchronous JavaScript and XML"의 약자로, 웹 페이지에서 데이터를 동적으로 로드하고 표시하기 위한 기술입니다. 이 기술은 서버와 브라우저 사이의 비동기식 통신을 이용하여 웹 페이지를 다시 로드하지 않고도 웹 페이지의 일부분만을 업데이트할 수 있습니다.

예를 들어, 사용자가 웹 페이지에서 버튼을 클릭하면, 이벤트가 발생하고 자바스크립트를 사용하여 서버로부터 추가 데이터를 요청하고, 서버는 이를 처리한 후 필요한 데이터만을 다시 클라이언트로 보냅니다. 그러면 클라이언트 측에서는 이 데이터를 사용하여 웹 페이지의 일부분을 업데이트합니다.

AJAX는 웹 페이지를 더욱 동적이고 반응형으로 만들어 주며, 사용자 경험을 향상시키는 데 도움이 됩니다. 이 기술은 다양한 분야에서 사용되며, 특히 웹 애플리케이션 개발에서 많이 활용됩니다.

 

이 스크립트를 HTML 파일에 포함하면 jQuery를 사용하여 무엇보다도 HTML DOM을 조작하고 이벤트를 처리하고 AJAX 요청을 할 수 있습니다.

        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;

            }

 

이메일 유효성 검사하기

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

            }

유효성 검사는 사용자가 입력한 값이 형식에 올바르게 입력되어있는지 하는 검사입니다. 아이디 값 youEmail에 val()메서드를 사용하여 요소를 설정합니다. 요소는 빈 문자열로 설정합니다. 그 후 #youEmailComment에 .innerText를 사용하여 넣고 싶은 문구를 넣습니다. jQuery에서 innerText 대신 text만 넣어도 사용 가능합니다.

그 후 실행되면 화면이  youEmail쪽으로 가도록 focus메서드를 사용해주고 return 값 을 false로 설정해줍니다.

 

그 밑이 유효성 검사 코드입니다.  getYouEmail을 정의 해줍니다. regExp를 사용하여 정규 표현식을 사용해줍니다.

 

"regExp"는 정규 표현식을 사용할 때 자주 사용되는 JavaScript의 객체입니다. "regExp" 객체를 사용하여 문자열에서 패턴을 찾고, 대체하거나 추출할 수 있습니다."regExp"는 정규 표현식을 사용할 때 자주 사용되는 JavaScript의 객체입니다. "regExp" 객체를 사용하여 문자열에서 패턴을 찾고, 대체하거나 추출할 수 있습니다.

 

(/^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i);

 

"^": 문자열의 시작
"[0-9a-zA-Z]": 숫자 또는 알파벳 문자 중 하나
"[-_.]?": 하이픈, 언더스코어 또는 마침표 문자 중 하나 또는 없음
"([0-9a-zA-Z])*": 숫자 또는 알파벳 문자 중 하나 또는 없음을 0회 이상 반복
"@": "@" 문자
"[0-9a-zA-Z]": 숫자 또는 알파벳 문자 중 하나
"([-_.]?[0-9a-zA-Z])*": 하이픈, 언더스코어 또는 마침표 문자 중 하나 또는 없음을 0회 이상 반복
".": 마침표 문자
"[a-zA-Z]{2,3}": 알파벳 문자를 2개에서 3개까지 반복
"$": 문자열의 끝
"i": 대소문자를 구분하지 않음 (case-insensitive)

 

그 후 정규식표현과 문자열을 비교하여 일치하는지 확인하기 위해 test()를 사용해줍니다.

"test()"는 JavaScript에서 정규 표현식과 문자열을 비교하여 일치 여부를 확인하는 메소드입니다. 이 메소드는 문자열이 정규 표현식과 일치하는지 여부를 불리언 값으로 반환합니다.

일치하지 않을경우 . text를 사용하여  #youEmailComment에 문구를 넣어줍니다.