커뮤니티 - 유효성 검사 구현 (2) (23.07.13)

현·2023년 7월 13일
server
0

Server

목록 보기
16/35
post-thumbnail

📝 회원 가입 유효성 검사

💡 전화번호 유효성 검사

🔎 signUp.jsp

.
.
.
                <label for="memberTel">
                    <span class="required">*</span> 전화번호
                </label>

                <div class="signUp-input-area">
                    <input type="text" id="memberTel" name="memberTel"
                            placeholder="(- 없이 숫자만 입력)" maxlength="11">
                </div>

                <span class="signUp-message" id="telMessage">전화번호를 입력해주세요.(- 제외)</span>
.
.
.
    <!-- signUp.js 연결 -->
    <script src="${contextPath}/resources/js/member/signUp.js"></script>
    
</body>
</html>

🔎 signUp.js

/* signUp.js */

// 전화번호 유효성 검사
const memberTel = document.getElementById("memberTel");
const telMessage = document.getElementById("telMessage");

// ** input 이벤트 **
// -> 입력과 관련된 모든 동작(key 관련, mouse 관련, 붙여넣기 등)
memberTel.addEventListener("input", function(){

    // 입력이 되지 않은 경우
    if(memberTel.value.trim().length == 0){
        telMessage.innerText = "전화번호를 입력해주세요.(- 제외)";
        // telMessage.classList.remove("error");
        // telMessage.classList.remove("confirm");
        telMessage.classList.remove("confirm", "error");

        return;
    }

    // 전화번호 정규식
    const regExp = /^0(1[01679]|2|[3-6][1-5]|70)\d{3,4}\d{4}$/;

    if(regExp.test(memberTel.value)){ // 유효한 경우
        telMessage.innerText = "유효한 전화번호 형식입니다.";
        telMessage.classList.add("confirm");
        telMessage.classList.remove("error");

    } else{ // 유효하지 않은 경우
        telMessage.innerText = "전화번호 형식이 올바르지 않습니다.";
        telMessage.classList.add("error");
        telMessage.classList.remove("confirm");
    }

})

💡 이메일 유효성 검사

🔎 signUp.jsp

.
.
.
            <form action="signUp" method="post" name="signUp-form">

                <label for="memberEmail">
                    <span class="required">*</span> 아이디(이메일)
                </label>

                <div class="signUp-input-area">
                    <input type="text" id="memberEmail" name="memberEmail"
                            placeholder="아이디(이메일)" maxlength="30"
                            autocomplete="off" required>

                    <!-- autocomplete="off" : 자동 완성 미사용 -->
                    <!-- required : 필수 작성 input 태그 -->

                    <button type="button">인증번호 받기</button>
                </div>

                <span class="signUp-message" id="emailMessage">메일을 받을 수 있는 이메일을 입력해 주세요.</span>
.
.
.

🔎 signUp.js

// 이메일 유효성 검사
const memberEmail = document.getElementById("memberEmail");
const emailMessage = document.querySelector("#emailMessage");

memberEmail.addEventListener("input", function(){
    
    // 입력이 되지 않은 경우
    if(memberEmail.value.trim().length == 0){
        emailMessage.innerText = "메일을 받을 수 있는 이메일을 입력해 주세요.";
        emailMessage.classList.remove("confirm", "error");

        return;
    } 

    // 입력된 경우
    const regExp = /^[\w\-\_]{4,}@[\w\-\_]+(\.\w+){1,3}$/;

    if(regExp.test(memberEmail.value)){ // 유효한 경우
        emailMessage.innerText = "유효한 이메일 형식입니다.";
        emailMessage.classList.add("confirm");
        emailMessage.classList.remove("error");

        // ************* 이메일 중복 검사(ajax) 진행 예정 **************

    }else{ // 유효하지 않은 경우
        emailMessage.innerText = "이메일 형식이 유효하지 않습니다."
        emailMessage.classList.add("error");
        emailMessage.classList.remove("confirm");

    } 
})

💡 닉네임 유효성 검사

🔎 signUp.jsp

.
.
.
                <label for="memberNickname">
                    <span class="required">*</span> 닉네임
                </label>

                <div class="signUp-input-area">
                    <input type="text" id="memberNickname" name="memberNickname"
                            placeholder="닉네임" maxlength="10">
                </div>

                <span class="signUp-message" id="nicknameMessage">영어/숫자/한글 2~10글자 사이로 작성해주세요.</span>
.
.
.

🔎 signUp.js

// 닉네임 유효성 검사
const memberNickname = document.getElementById("memberNickname");
const nicknameMessage = document.getElementById("nicknameMessage");

memberNickname.addEventListener("input", function(){

    // 입력되지 않은 경우
    if(memberEmail.value.trim().length == 0){
        nicknameMessage.innerText = "영어/숫자/한글 2~10자 사이로 작성해주세요.";
        nicknameMessage.classList.remove("confirm", "error");

        return;
    }

    const regExp = /^[a-zA-Z0-9가-힣]{2,10}$/;

    if(regExp.test(memberNickname.value)){ // 유효한 경우
        nicknameMessage.innerText = "유효한 닉네임 형식입니다.";
        nicknameMessage.classList.add("confirm");
        nicknameMessage.classList.remove("error");

            // ************* 닉네임 중복 검사(ajax) 진행 예정 **************

    } else{
        nicknameMessage.innerText = "닉네임 형식이 유효하지 않습니다.";
        nicknameMessage.classList.add("error");
        nicknameMessage.classList.remove("confirm");
    }
})

💡 비밀번호 유효성 검사

🔎 signUp.jsp

.
.
.
                <label for="memberPw">
                    <span class="required">*</span> 비밀번호
                </label>

                <div class="signUp-input-area">
                    <input type="password" id="memberPw" name="memberPw"
                            placeholder="비밀번호" maxlength="30">
                </div>

                <div class="signUp-input-area">
                    <input type="password" id="memberPwConfirm"
                            placeholder="비밀번호 확인" maxlength="30">
                </div>

                <span class="signUp-message" id="pwMessage">영어, 숫자, 특수문자(!,@,#,-,_) 6~30글자 사이로 작성해주세요.</span>
.
.
.

🔎 signUp.js

// 비밀번호 유효성 검사
const memberPw = document.getElementById("memberPw");
const memberPwConfirm = document.getElementById("memberPwConfirm");
const pwMessage = document.getElementById("pwMessage");

memberPw.addEventListener("input", function(){

    if(memberPw.value.trim().length == 0){
        pwMessage.innerText = "영어, 숫자, 특수문자(!,@,#,-,_) 6~30글자 사이로 작성해주세요.";
        pwMessage.classList.remove("confirm", "error");

        return;
    }

    // const regExp = /^[a-zA-Z0-9!@#_-]{6,30}$/;
    const regExp = /^[\w!@#_-]{6,30}$/;

    if(regExp.test(memberPw.value)){ // 비밀번호 유효한 경우

        if(memberPwConfirm.value.trim().length == 0){ // 비밀번호 유효, 비밀번호 확인 작성 X
            pwMessage.innerText = "유효한 비밀번호 형식입니다.";
            pwMessage.classList.add("confirm");
            pwMessage.classList.remove("error");

        }else{ // 비밀번호 유효, 확인 작성 O
            checkPw(); // 비밀번호 일치 검사 함수 호출()
        }

    } else{
        pwMessage.innerText = "비밀번호 형식이 유효하지 않습니다.";
        pwMessage.classList.add("error");
        pwMessage.classList.remove("confirm");
    }

})

// 비밀번호 확인 유효성 검사

// 함수명() : 함수 호출(수행)
// 함수명   : 함수에 작성된 코드 반환

memberPwConfirm.addEventListener("input", checkPw);
// -> 이벤트가 발생되었을 때 정의된 함수를 호출하겠다.

function checkPw(){ // 비밀번호 일치 검사

    // 비밀번호 / 비밀번호 확인이 같을 경우
    if(memberPwConfirm.value == memberPw.value){
        pwMessage.innerText = "비밀번호가 일치합니다.";
        pwMessage.classList.add("confirm");
        pwMessage.classList.remove("error");

    }else{
        pwMessage.innerText = "비밀번호가 일치하지 않습니다.";
        pwMessage.classList.add("error");
        pwMessage.classList.remove("confirm");
    }
}

💡 최종 확인!

🔎 signUp.jsp

.
.
.
            <form action="signUp" method="post" name="signUp-form" onsubmit="return signUpValidate()">
.
.
.

🔎 signUp.js

/* signUp.js */

// 유효성 검사 여부를 기록할 객체 생성
const checkObj = {
    "memberEmail"       : false,
    "memberPw"          : false,
    "memberPwConfirm"   : false,
    "memberNickname"    : false,
    "memberTel"         : false
};

// 전화번호 유효성 검사
const memberTel = document.getElementById("memberTel");
const telMessage = document.getElementById("telMessage");

// ** input 이벤트 **
// -> 입력과 관련된 모든 동작(key 관련, mouse 관련, 붙여넣기 등)
memberTel.addEventListener("input", function(){

    // 입력이 되지 않은 경우
    if(memberTel.value.trim().length == 0){
        telMessage.innerText = "전화번호를 입력해주세요.(- 제외)";
        // telMessage.classList.remove("error");
        // telMessage.classList.remove("confirm");
        telMessage.classList.remove("confirm", "error");

        checkObj.memberTel = false; // 유효하지 않은 상태임을 기록
        return;
    }

    // 전화번호 정규식
    const regExp = /^0(1[01679]|2|[3-6][1-5]|70)\d{3,4}\d{4}$/;

    if(regExp.test(memberTel.value)){ // 유효한 경우
        telMessage.innerText = "유효한 전화번호 형식입니다.";
        telMessage.classList.add("confirm");
        telMessage.classList.remove("error");
        checkObj.memberTel = true; // 유효한 상태임을 기록

    } else{ // 유효하지 않은 경우
        telMessage.innerText = "전화번호 형식이 올바르지 않습니다.";
        telMessage.classList.add("error");
        telMessage.classList.remove("confirm");
        checkObj.memberTel = false; // 유효하지 않은 상태임을 기록
    }

})

// 이메일 유효성 검사
const memberEmail = document.getElementById("memberEmail");
const emailMessage = document.querySelector("#emailMessage");

memberEmail.addEventListener("input", function(){
    
    // 입력이 되지 않은 경우
    if(memberEmail.value.trim().length == 0){
        emailMessage.innerText = "메일을 받을 수 있는 이메일을 입력해 주세요.";
        emailMessage.classList.remove("confirm", "error");

        checkObj.memberEmail = false; // 유효 X 기록
        return;
    } 

    // 입력된 경우
    const regExp = /^[\w\-\_]{4,}@[\w\-\_]+(\.\w+){1,3}$/;

    if(regExp.test(memberEmail.value)){ // 유효한 경우
        emailMessage.innerText = "유효한 이메일 형식입니다.";
        emailMessage.classList.add("confirm");
        emailMessage.classList.remove("error");

        checkObj.memberEmail = true; // 유효 O 기록

        // ************* 이메일 중복 검사(ajax) 진행 예정 **************

    }else{ // 유효하지 않은 경우
        emailMessage.innerText = "이메일 형식이 유효하지 않습니다."
        emailMessage.classList.add("error");
        emailMessage.classList.remove("confirm");
        checkObj.memberEmail = false; // 유효 X 기록

    } 
})

// 닉네임 유효성 검사
const memberNickname = document.getElementById("memberNickname");
const nicknameMessage = document.getElementById("nicknameMessage");

memberNickname.addEventListener("input", function(){

    // 입력되지 않은 경우
    if(memberEmail.value.trim().length == 0){
        nicknameMessage.innerText = "영어/숫자/한글 2~10자 사이로 작성해주세요.";
        nicknameMessage.classList.remove("confirm", "error");

        checkObj.memberNickname = false; // 유효 X 기록
        return;
    }

    const regExp = /^[a-zA-Z0-9가-힣]{2,10}$/;

    if(regExp.test(memberNickname.value)){ // 유효한 경우
        nicknameMessage.innerText = "유효한 닉네임 형식입니다.";
        nicknameMessage.classList.add("confirm");
        nicknameMessage.classList.remove("error");

        checkObj.memberNickname = true; // 유효 O 기록

        // ************* 닉네임 중복 검사(ajax) 진행 예정 **************

    } else{
        nicknameMessage.innerText = "닉네임 형식이 유효하지 않습니다.";
        nicknameMessage.classList.add("error");
        nicknameMessage.classList.remove("confirm");
        checkObj.memberNickname = false; // 유효 X 기록
    }
})

// 비밀번호 유효성 검사
const memberPw = document.getElementById("memberPw");
const memberPwConfirm = document.getElementById("memberPwConfirm");
const pwMessage = document.getElementById("pwMessage");

memberPw.addEventListener("input", function(){

    if(memberPw.value.trim().length == 0){
        pwMessage.innerText = "영어, 숫자, 특수문자(!,@,#,-,_) 6~30글자 사이로 작성해주세요.";
        pwMessage.classList.remove("confirm", "error");

        checkObj.memberPw = false; // 유효 X 기록
        return;
    }

    // const regExp = /^[a-zA-Z0-9!@#_-]{6,30}$/;
    const regExp = /^[\w!@#_-]{6,30}$/;

    if(regExp.test(memberPw.value)){ // 비밀번호 유효한 경우

        checkObj.memberPw = true; // 유효 O 기록

        if(memberPwConfirm.value.trim().length == 0){ // 비밀번호 유효, 비밀번호 확인 작성 X
            pwMessage.innerText = "유효한 비밀번호 형식입니다.";
            pwMessage.classList.add("confirm");
            pwMessage.classList.remove("error");

        }else{ // 비밀번호 유효, 확인 작성 O
            checkPw(); // 비밀번호 일치 검사 함수 호출()
        }

    } else{
        pwMessage.innerText = "비밀번호 형식이 유효하지 않습니다.";
        pwMessage.classList.add("error");
        pwMessage.classList.remove("confirm");
        checkObj.memberPw = false; // 유효 X 기록
    }

})

// 비밀번호 확인 유효성 검사

// 함수명() : 함수 호출(수행)
// 함수명   : 함수에 작성된 코드 반환

memberPwConfirm.addEventListener("input", checkPw);
// -> 이벤트가 발생되었을 때 정의된 함수를 호출하겠다.

function checkPw(){ // 비밀번호 일치 검사

    // 비밀번호 / 비밀번호 확인이 같을 경우
    if(memberPwConfirm.value == memberPw.value){
        pwMessage.innerText = "비밀번호가 일치합니다.";
        pwMessage.classList.add("confirm");
        pwMessage.classList.remove("error");
        checkObj.memberPwConfirm = true; // 유효 O 기록

    }else{
        pwMessage.innerText = "비밀번호가 일치하지 않습니다.";
        pwMessage.classList.add("error");
        pwMessage.classList.remove("confirm");
        checkObj.memberPwConfirm = false; // 유효 X 기록
    }
}

// 회원가입 버튼 클릭 시 유효성 검사가 완료되었는지 확인하는 함수
function signUpValidate(){

    // checkObj에 있는 모든 속성을 반복 접근하여
    // false가 하나라도 있는 경우에는 form태그 기본 이벤트 제거

    let str;

    for(let key in checkObj){ // 객체용 향상된 for문

        // 현재 접근 중인 key의 value가 false인 경우
        if(!checkObj[key]){

            switch(key){

                case "memberEmail"      : str = "이메일이"; break;
                case "memberPw"         : str = "비밀번호가"; break;
                case "memberPwConfirm"  : str = "비밀번호 확인이"; break;
                case "memberNickname"   : str = "닉네임이"; break;
                case "memberTel"        : str = "전화번호가"; break;
            }

            str += " 유효하지 않습니다.";

            alert(str);

            document.getElementById(key).focus();

            return false; // form태그 기본 이벤트 제거
        }
    }

    return true; // form태그 기본 이벤트 수행

}
profile
현
풀스택 개발자 기록집 📁
이전 포스트

커뮤니티 - 유효성 검사 구현 (1) (23.07.12)

다음 포스트

Ajax (23.07.13)

0개의 댓글