비동기방식 가입페이지(임시)

비동기 방식(ajax)으로 가입페이지 만들기

ajax를 사용하여 비동기 방식으로 가입페이지 내에서 유효성 검사를 해보겠습니다.

Javascript 작성( jQuery ) [이메일 중복확인]

let isEmailCheck = false;

function emailChecking(){
    let youEmail = $("#youEmail").val();

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

            success : function(data){
                if(data.result == "good"){
                    $("#youEmail").val().text("사용 가능한 이메일입니다.");
                    isEmailCheck = true;
                } else {
                    $("#youEmail").val().text("이미 사용중인 이메일입니다.");
                    isEmailCheck = false;
                }
            }

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

Javascript 정리해보기

• isEmailCheck에 false의 값을 저장해놓습니다.
• emailChecking()함수
• 변수 youEmail에 사용자가 입력한 #youEmail의 value값을 가져와 저장합니다.

 

 

 

Javascript 작성하기( jQuery ) [유효성 검사]

function joinChecks(){
    // 이름 유효성 검사
    if($("#youName").val() == ''){
        $("#youNameComment").text("* 이름을 입력해주세요.");
        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;
    }
}

javascript 정리해보기

• joinCheck()함수
• #youName에서 받아온 value값이 공백이면
• #youNameComment에 텍스트를 출력합니다.
•  
• (조건에 맞아 실행 시 종료를 의미하는 return사용)
• getYouName에 한글을 사용한다는 정규식표현을 저장합니다.
• #youName의 value값을 test를 사용해 getYouName과 매칭시킵니다.
• ' ! '를 붙여 test의 결과가 false라면 #youNameComment에 텍스트를 출력하고 #youName의 value값을 공백으로 바꾼 뒤 #youName을 focus()하여 화면을 이동시킵니다.