ajax를 이용하여 유효성 검사하기!

오늘은 PHP 관리자 회원가입을 작업해보겠습니다.

이용약관 체크박스 표시 검사

// 체크 표시 검사
const agreeBtn = document.querySelector(".agreeBtn");
const agreeCheck = document.querySelectorAll(".agreeCheck");
const agreeMsg = document.querySelector(".agreeMsg");

agreeBtn.addEventListener("click", (e) => {

    agreeCheck.forEach((check) => {
        if(check.checked == false){
            agreeMsg.innerText = "*체크박스를 다시 한 번 확인해주세요!";

            e.preventDefault();
        }
    });
})

agreeCheck 변수는 약관 동의 체크박스를 나타내는 DOM 요소의 집합입니다. 이 변수는 querySelectorAll을 사용하여 .agreeCheck 클래스를 가진 모든 요소를 가져옵니다.

agreeMsg 변수는 약관 동의 메시지를 출력합니다.

addEventListener 메서드를 사용하여 약관 동의 버튼(agreeBtn)에 클릭 이벤트를 추가합니다. 이벤트 핸들러 함수는 화살표 함수로 정의됩니다.

forEach 메서드를 사용하여 agreeCheck 집합에 대한 반복문을 실행합니다. checked 속성이 false인 체크박스가 있으면 agreeMsg에 메시지를 출력하고, preventDefault 메서드를 사용하여 click 이벤트를 막습니다. 이렇게 함으로써, 모든 체크박스가 체크되어 있을 때만 버튼 클릭 이벤트가 발생하도록 합니다.

ajax를 이용한 유효성 검사

유효성 검사

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;
    }

}

이 함수는 먼저 이름 필드(#youName)가 비어있는지 확인합니다. 만약 비어있다면, 사용자에게 이름을 입력하도록 하는 오류 메시지(#youNameComment)를 표시하고 ($("#youNameComment").text("* 이름을 입력해주세요!");), 커서를 이름 필드로 이동시킨 후($("#youName").focus();), 함수를 종료합니다(return false;).

이름 필드(#youName)에 입력된 값이 한글로만 이루어져 있는지 확인하기 위해 정규표현식 객체를 생성합니다. (let getYouName = RegExp(/^[가-힣]+$/);) 정규식은 한글 한 글자 이상(^[가-힣]+$)으로 이루어져야 합니다.

만약 이름 필드(#youName)에 입력된 값이 한글로 이루어져 있지 않다면, 사용자에게 한글만 입력 가능하다는 오류 메시지(#youNameComment)를 표시하고 ($("#youNameComment").text("* 이름은 한글만 사용 가능합니다!");), 이름 필드(#youName)를 지웁니다($("#youName").val('');), 커서를 이름 필드로 이동시킨 후($("#youName").focus();), 함수를 종료합니다(return false;).

이메일 필드(#youEmail)가 비어있는지 확인합니다. 만약 비어있다면, 사용자에게 이메일을 입력하도록 하는 오류 메시지(#youEmailComment)를 표시하고 ($("#youEmailComment").text("* 이메일을 입력해주세요!");), 커서를 이메일 필드로 이동시킨 후($("#youEmail").focus();), 함수를 종료합니다(return false;).

이메일 필드(#youEmail)에 입력된 값이 이메일 형식에 맞는지 확인하기 위해 정규표현식 객체를 생성합니다. (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);) 정규식은 이메일 형식(^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$)과 일치해야 합니다.

이메일 중복검사

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 = flase;
                }
            }
            error : function(request, status, error){
                console.log("request" + request);
                console.log("status" + status);
                console.log("error" + error);
            }
        });
    }
}

isEmailCheck 변수는 이메일 중복 체크가 완료되었는지 여부를 나타내는 불리언 값입니다. 기본값은 false입니다.

emailChecking 함수는 사용자가 입력한 이메일을 가져와서 이메일이 비어 있지 않은지 확인합니다. 비어 있으면 "이메일을 입력해주세요!" 라는 메시지를 출력하고, 그렇지 않으면 $.ajax를 사용하여 joinCheck.php 파일에 이메일 중복 체크를 요청합니다.

$.ajax 함수의 type은 요청 방식을 POST로 지정하고, url은 이메일 중복 체크를 수행할 서버 파일의 경로를 지정합니다.
data는 요청 시 서버로 보낼 데이터를 객체 형태로 지정합니다. 여기에서는 youEmail과 type을 보냅니다. youEmail은 사용자가 입력한 이메일 주소이고, type은 isEmailCheck 변수의 값을 보냅니다.

dataType은 서버에서 반환되는 데이터의 형식을 지정합니다. 여기에서는 JSON 형식으로 지정합니다.

success 함수는 서버에서 반환된 데이터를 처리하는 함수입니다. 반환된 데이터는 JSON 형식으로 data 변수에 저장됩니다. data.result 값이 "good"이면 "사용 가능한 이메일입니다." 라는 메시지를 출력하고, isEmailCheck 변수를 true로 설정합니다. "good"이 아니라면 "이미 사용중인 이메일입니다." 라는 메시지를 출력하고, isEmailCheck 변수를 false로 설정합니다.

error 함수는 요청이 실패한 경우 호출되는 함수입니다. 실패 원인은 request, status, error 매개변수를 통해 출력됩니다. 여기에서는 각각의 값을 콘솔에 출력합니다.