PHP 사이트 만들기 회원가입 유효성검사 jquery

PHP 사이트 만들기 회원가입 유효성검사 jquery

 

 

 

 

HTML

<div class="join__inner ">
    <h2>회원가입</h2>
    <p>회원가입을 위해 아이디와 비밀번호를 등록해주세요.</p>
    <div class="join__form">
        <form action="joinEnd.php" name="#" method="post" onsubmit="return joinChecks()">
            <fieldset>
                <legend class="blind">회원가입 영역</legend>
                <div>
                    <label for="memberID"></label>
                    <input type="text" id="memberID" name="memberID" class="inputStyle" placeholder="아이디">
                    <p class="joinChkmsg" id="memberIDComment"></p>
                </div>
                <div>
                    <label for="youPass"></label>
                    <input type="password" id="youPass" name="youPass" class="inputStyle" placeholder="비밀번호">
                    <p class="joinChkmsg" id="youPassComment"></p>
                </div>
                <div>
                    <label for="youPassC"></label>
                    <input type="password" id="youPassC" name="youPassC" class="inputStyle" placeholder="비밀번호 확인">
                    <p class="joinChkmsg" id="youPassCComment"></p>
                </div>
                <div>
                    <label for="youName"></label>
                    <input type="text" id="youName" name="youName" class="inputStyle" placeholder="이름">
                    <p class="joinChkmsg" id="youNameComment"></p>
                </div>
                <div>
                    <label for="youPhone"></label>
                    <input type="text" id="youPhone" name="youPhone" class="inputStyle" placeholder="휴대폰번호">
                    <span id="chkPhone"></span>
                    <p class="joinChkmsg" id="youPhoneComment"></p>
                </div>
                <div>
                    <label for="nickName"></label>
                    <input type="text" id="nickName" name="nickName" class="inputStyle" placeholder="닉네임">
                    <span id="chkNickName"></span>
                    <p class="joinChkmsg" id="nickNameComment"></p>
                </div>
                <div>
                    <label for="youBirth"></label>
                    <input type="text" id="youBirth" name="youBirth" class="inputStyle" placeholder="생년월일">
                    <p class="joinChkmsg" id="youBirthComment"></p>
                </div>
                <div>
                    <label for="youGender"></label>
                    <select type="text" id="youGender" name="youGender" class="inputStyle" placeholder="성별">
                        <option value="">성별 선택</option>
                        <option value="1">남</option>
                        <option value="2">여</option>
                    </select>
                </div>
                <button type="submit" class="btnStyle3">회원가입 완료</button>
            </fieldset>
        </form>
    </div>
</div>

회원가입을 위한 코드입니다.

 

form요소는 실제 회원가입 양식을 담고 있습니다.

action 속성은 양식을 제출할 때 보낼 URL 을 지정합니다.

name 속성은 양식을 식별하는 데 사용됩니다.

mathod 속성은 양식을 제출할 때 사용할 HTTP메소드를 지정합니다.

 

fieldset 요소는 관련된 입력 요소들을 그룹화하고 그룹에 대한 설명을 제공합니다.

 

legend 요소는 fieldset 요소에 대한 설명을 제공합니다.

 

 

유효성 검사

<script src="https://code.jquery.com/jquery-3.6.4.js" integrity="sha256-a9jBBRygX1Bh5lt8GZjXDzyOB+bWve9EiO7tROUtj/E=" crossorigin="anonymous"></script>
<script>
//유효성 체크
function joinChecks(){
    // 아이디 유효성 검사
    let getmemberID =  RegExp(/^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([\-.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i);
    $("#memberIDComment").addClass("red");
    if($("#memberID").val() == ''){
        $("#memberIDComment").text("* 아이디를 입력해주세요!");
        $("#memberID").focus();
        return false;
    }else if(!getmemberID.test($("#memberID").val())){
        $("#memberIDComment").text("* 아이디 형식에 맞게 작성해주세요! aaa@gmail.com");
        $("#memberID").val('');
        $("#memberID").focus();
        return false;
    }
    chkMemberId();
    if(isEmailCheck==false){
        return false;  
    }
    // 마지막 if문 true 확인 구문
    // alert(isEmailCheck);
​
    // // 비밀번호 유효성 검사
    let getYouPass = $("#youPass").val();
    let getYouPassNum = getYouPass.search(/[0-9]/g);
    let getYouPassEng = getYouPass.search(/[a-z]/ig);
    let getYouPassSpe = getYouPass.search(/[`~!@@#$%^&*|₩₩₩'₩";:₩/?]/gi);
    $("#youPassComment").addClass("red");
    if($("#youPass").val() == ''){
        $("#youPassComment").text("* 비밀번호를 입력해주세요!");
        $("#youPass").focus();
        return false;
        // 8~20자이내, 공백X, 영문, 숫자, 특수문자
    }else if(getYouPass.length < 8 || getYouPass.length > 20){
        $("#youPassComment").text(" * 8자리 ~ 20자리 이내로 입력해주세요");
        return false;
    } else if (getYouPass.search(/\s/) != -1){
        $("#youPassComment").text("* 비밀번호는 공백없이 입력해주세요!");
        return false;
    } else if (getYouPassNum < 0 || getYouPassEng < 0 || getYouPassSpe < 0 ){
        $("#youPassComment").text("* 영문, 숫자, 특수문자를 혼합하여 입력해주세요!");
        return false;
    }else{
        $("#youPassComment").removeClass("red");
        $("#youPassComment").addClass("green");
        $("#youPassComment").text("* 사용가능합니다");
    }
    // 비밀번호 확인 유효성 검사
    $("#youPassCComment").addClass("red");
    if($("#youPassC").val() == ''){
    $("#youPassCComment").text("* 확인 비밀번호를 입력해주세요!");
    $("#youPassC").focus();
    return false;
    // 비밀번호 동일한지 체크
    }else if($("#youPass").val() !== $("#youPassC").val()){
        $("#youPassCComment").text("* 비밀번호가 일치하지 않습니다.");
        return false;
    }else{
        $("#youPassCComment").text("");
    }
    //이름 유효성 검사
    $("#youNameComment").addClass("red");
    let getYouName = RegExp(/^[가-힣]+$/);
    if($("#youName").val() == ''){
        $("#youNameComment").text("* 이름을 입력해주세요!");
        $("#youName").focus();
        return false;
    }else if(!getYouName.test($("#youName").val())){
        $("#youNameComment").text("* 이름은 한글만 사용 가능합니다.");
        $("#youName").val('');
        $("#youName").focus();
        return false;
    }else if($("#youName").val().length < 2 || $("#youName").val().length > 10){
        $("#youNameComment").text("* 이름은 2~10글자까지만 가능합니다.");
        $("#youName").val('');
        $("#youName").focus();
        return false;
    }else{
        $("#youNameComment").removeClass("red");
        $("#youNameComment").addClass("green");
        $("#youNameComment").text("* 사용가능합니다");
    }
    // 연락처 유효성 검사
    $("#youPhoneComment").addClass("red");
    let getYouPhone = RegExp(/01[016789]-[^0][0-9]{3,4}-[0-9]{4}/);
    if($("#youPhone").val() == ''){
        $("#youPhoneComment").text("* 연락처를 입력해주세요!");
        $("#youPhone").focus();
        return false;
    }else if(!getYouPhone.test($("#youPhone").val())){
        $("#youPhoneComment").text("* 휴대폰 번호가 정확하지 않습니다.(000-0000-0000)");
        $("#youPhone").val('');
        $("#youPhone").focus();
        return false;
    }else{
        $("#youPhoneComment").removeClass("red");
        $("#youPhoneComment").addClass("green");
        $("#youPhoneComment").text("* 사용가능한번호입니다.");
    }
    // 닉네임 유효성 검사
    $("#nickNameComment").addClass("red");
    let getnickName = RegExp(/^[가-힣|0-9]+$/);
    if($("#nickName").val() == ''){
        $("#nickNameComment").text("* 닉네임을 입력해주세요!");
        $("#nickName").focus();
        return false;
    }else if(!getnickName.test($("#nickName").val())){
        $("#nickNameComment").text("* 닉네임은 한글 또는 숫자만 사용 가능합니다.");
        $("#nickName").val('');
        $("#nickName").focus();
        return false;
    }else{
        $("#nickNameComment").removeClass("red");
        $("#nickNameComment").addClass("green");
        $("#nickNameComment").text("* 사용가능합니다.");
    }
    chkNickName();
    if(isNickCheck==false){
        return false;  
    }
​
    $("#youBirthComment").addClass("red");
    let getYouBirth = RegExp(/^(19[0-9][0-9]|20\d{2})-(0[0-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/);
    // 생년월일 유효성 검사
    if($("#youBirth").val() == ''){
        $("#youBirthComment").text("* 생년월일을 입력해주세요!");
        $("#youBirth").focus();
        return false;
    }else if(!getYouBirth.test($("#youBirth").val())){
        $("#youBirthComment").text("* 생년월일 형식이 정확하지 않습니다.(YYYY-MM-DD)");
        $("#youBirth").val('');
        $("#youBirth").focus();
        return false;
    }else{
        $("#youBirthComment").removeClass("red");
        $("#youBirthComment").addClass("green");
        $("#youBirthComment").text("* 사용가능합니다 !");
    }      
}    
</script>

아이디, 비밀번호, 비밀번호 확인, 이름, 연락처, 닉네임, 생년월일에 대한 유효성 검사를 하나씩 해줬습니다.

 

getmemberID

정규표현식을 사용해 이메일 형식의 아이디를 검사하기 위한 변수선언

 

$("memberID").val() 함수를 사용해 아이디 입력 필드에 입력된 값을 가져옴

이 값이 비어있으면 if("#memberID").val()=='')문이 참이 되어, memberIDComment 엘리먼트에 아이디를 입력해주세요! 라는 메시지가 표시

 

$("memberID").focus() 함수를 호출해 아이디 입력 필드로 포커스를 이동시키고, return false를 사용해 폼 제출을 중지

(창이 새로고침되는 것을 막음)

 

입력된 값이 비어 있지 않다면 else if (!getmemberID).test($("#memberID").val()))) 문이 실행되어 getmemberID 정규표현식과 입력된 값이 일치하지 않으면 memberIDComment 앨리먼트에 지정한 멘트가 표시

 

$("memberID").val('')함수를 사용해 아이디 입력 필드의 값을 지우고, $(""#memberID").focus() 함수를 호출해 다시 아이디 입력 필드로 포커스를 이동

return false로 폼 제출 중지

 

chkMemberId()함수를 호출해 아이디 중복 체크를 실행

중복 아이디가 아니라면 isEmailCheck 변수는 true가 되며, 중복된 아이디라면 false

isEmailCheck 변수는 ture가 되며, 중복된 아이디인 경우 폼 제출을 중지

 

 

 

가입되지 않은 아이디 인지 확인_아이디 중복검사

// isEmailCheck
let isEmailCheck = false;
let isNickCheck = false;
function chkMemberId(){
    $.ajax({
        type : "POST",
        url : "joinCheck.php",
        data : {"youEmail" : $("#memberID").val(), "type" : "isMemberIdChk"},
        dataType : "json",
        success : function(data){
            if(data.result == "good"){
                $("#memberIDComment").text("* 사용 가능한 아이디 입니다");
                $("#memberIDComment").removeClass("red");
                $("#memberIDComment").addClass("green");
                console.log("11")
                 isEmailCheck = true;
            }else {
                console.log("22")
                $("#memberIDComment").text("* 사용 중인 아이디 입니다");
                 isEmailCheck = false;

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

$.ajax()함수를 사용해 서버로 이메일 주소를 전송하고, 해당 이메일 주소가 이미 사용 중인지 확인하는 기능을 수행

 

 type, url, data, dataType, success, error등의 인자가 전달

 

여시거 type은 HTTP요청 방식을, url은 요청을 보낼 URL을 data는 전송할 데이터를, dataType는 서버에서 반환되는 데이터의 타입을 지정

 

서버에서 반환되는 데이터는 success콜백 함수에서 처리

이 콜백함수는 서버로부터 성공적으로 응답이 도착한 경우에 호출

이 함수에서는 서버에서 전송된 JSON데이터의 resulr값을 확인하여, 해당 이메일 주소가 이미 사용중인 경우

사용중인 아이디입니다. 로 변경하고 isEmailCheck 변수값을 false로 변경

 

반면 이메일 주고사 사용 간으한 경우 사용 가능한 아이디 입니다.로 변경하고 isEmailCheck변수값을 true 로 변경

 

마지막으로, 서버에서 반환되는 데이터가 정상적으로 처리되지 않았을 경우 error 콜백함수에서 처리