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

이 코드는 동의 체크박스가 모두 체크되어 있는지 확인하는 기능을 가진 JavaScript 코드입니다.

동작 방식은 agreeBtn 요소에 'click' 이벤트를 추가하고, 각 agreeCheck 요소를 반복하여 체크되어 있는지 확인합니다. 만약 체크가 안 된 요소가 있으면, agreeMsg 요소의 텍스트를 변경하고, 기본 동작을 막아서 폼 제출을 방지합니다.

따라서, 이 코드를 사용하려면 HTML에 동의 체크박스와 메시지를 출력할 agreeMsg 요소가 필요합니다. 또한, 동의 버튼(agreeBtn)이 클릭되었을 때 이 코드가 실행되도록 해야 합니다.

 

페이지가 넘어가기 전에 이름과 이메일 유효성 검사

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())){
        $("#youNameComment").text("* 이메일 형식에 맞게 작성해주세요.");
        $("#youEmailName").val('');
        $("#youEmail").focus(); 
        return false;
    }
}

이 코드는 회원가입 페이지에서 이름과 이메일을 입력하는 필드에서 유효성을 검사하는 함수입니다.

이름 필드 유효성 검사:

이름이 입력되었는지 확인하고, 입력되지 않았을 경우 에러 메시지 출력 후 해당 필드에 포커스를 맞춥니다.
이름 필드에 한글만 입력되었는지 확인하고, 한글이 아닐 경우 에러 메시지 출력 후 해당 필드를 초기화하고 포커스를 맞춥니다.

 

이메일 필드 유효성 검사:

이메일이 입력되었는지 확인하고, 입력되지 않았을 경우 에러 메시지 출력 후 해당 필드에 포커스를 맞춥니다.
이메일 형식에 맞게 입력되었는지 확인하고, 형식에 맞지 않을 경우 에러 메시지 출력 후 해당 필드를 초기화하고 포커스를 맞춥니다.
이 함수는 회원가입 페이지에서 회원 정보를 입력하는 필드의 유효성을 검사하여, 문제가 있을 경우 에러 메시지를 출력하고, 해당 필드에 포커스를 맞추도록 도와줍니다.

 

정보가 중복되는지 검사

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

해당 코드는 이메일 중복 체크를 하는 Ajax 함수입니다.

우선 isEmailCheck 변수는 이메일 중복 체크가 완료되었는지의 여부를 나타내는 Boolean 변수입니다. emailChecking 함수는 이메일 중복 체크를 하는 함수이며, 클라이언트 측에서 이메일을 입력하면 $.ajax 메소드를 이용하여 서버로 이메일 중복 체크를 요청하게 됩니다.

서버로 전송되는 데이터는 youEmail과 type이며, youEmail은 클라이언트에서 입력한 이메일 주소이고, type은 isEmailCheck 변수로부터 받아오게 됩니다. 서버에서는 이메일 주소가 이미 존재하는지 여부를 데이터베이스를 통해 체크하고, 결과를 JSON 형태로 반환합니다.

success 콜백 함수에서는 서버로부터 받아온 데이터의 result가 "good"인 경우 이메일 주소가 사용 가능하다는 메시지를, "bad"인 경우 이미 존재하는 이메일이라는 메시지를 출력하게 됩니다. isEmailCheck 변수도 이에 맞게 값을 업데이트해줍니다.

만약 Ajax 요청이 실패한 경우, error 콜백 함수에서는 각각의 정보를 console.log()를 이용하여 출력하게 됩니다.