🌷 회원 가입 - 유효성 검사

---

🌼 정규 표현식 (Regular Expression)

특정한 규칙을 가진 문자열 집합을 표현하는데 사용하는 형식 언어
-> 문자열에 대한 검색, 일치 여부, 치환 등을 수행할 수 있음

⏬ 자세한 설명 🤔 ⏬
정규 표현식 (23.06.21)

🌼 JS 객체

{"K":V, "K":V} (Map 형식)

🌱 특징

1) 원하는 value를 얻어오는 방법

• 객체명.key
• 객체명["key"]

2) 객체에 특정 key가 존재하지 않으면 추가할 수 있다.

[예시]
const obj = {"a":1, "b":2}
obj.c = 3 // -> {"a":1, "b":2, "c":3}

3) 객체에 특정 key를 삭제할 수 있다. (delete 연산자)

[예시]
const obj = {"a":1, "b":2}
delete obj.b; // {"a":1}

---

👀 코드로 살펴보기

🌱 이메일 유효성 검사

🍄 signUp.js

/* 유효성 검사 진행 여부 확인용 객체 */
// -> 모든 value가 true인 경우에만 회원 가입 진행
const checkObj = {
    "memberEmail" : false,
    "memberPw" : false,
    "memberPwConfirm" : false,
    "memberNickname" : false,
    "memberTel" : false
};


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

// 이메일이 입력될 때마다
memberEmail.addEventListener("input", () => {
    
    // 입력된 이메일이 없을 경우
    if(memberEmail.value.trim().length == 0){
        memberEmail.value = "";
        emailMessage.innerText = "메일을 받을 수 있는 이메일을 입력해주세요.";

        // confirm, error 클래스 삭제해서 검정 글씨로 바꾸기
        emailMessage.classList.remove("confirm", "error");

        checkObj.memberEmail = false; // 빈칸 == 유효 X

        return;
    }

    // 정규 표현식을 이용해서 유효한 형식인지 판별
    // 1) 정규 표현식 객체 생성
    const regEx = /^[A-Za-z\d\-\_]{4,}@[가-힣\w\-\_]+(\.\w+){1,3}$/;

    // 2) 입력 받은 이메일과 정규식 일치 여부 판별
    if(regEx.test(memberEmail.value)){ // 유효한 경우
        emailMessage.innerText = "유효한 형식입니다.";
        emailMessage.classList.add("confirm");
        emailMessage.classList.remove("error");

        checkObj.memberEmail = true; // 유효 O

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

        checkObj.memberEmail = false; // 유효 X
    }

})

---

🌱 비밀번호 유효성 검사

🍄 signUp.js

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

// 비밀번호 입력 시 유효성 검사
memberPw.addEventListener("input", ()=>{

    // 비밀번호가 입력되지 않은 경우
    if(memberPw.value.trim().length == 0){
        memberPw.value = "";

        pwMessage.innerText = "영어,숫자,특수문자(!,@,#,-,_) 6~20글자 사이로 입력해주세요.";
        pwMessage.classList.remove("confirm", "error"); // 검정 글씨

        checkObj.memberPw = false; // 빈칸 == 유효 X

        return;
    }

    // 정규 표현식을 이용한 비밀번호 유효성 검사
    const regEx = /^[a-zA-Z0-9\!\@\#\-\_]{6,20}$/;

    // 입력한 비밀번호가 유효한 경우
    if(regEx.test(memberPw.value)){
        checkObj.memberPw = true;

        // 비밀번호가 유효하게 작성된 상태에서
        // 비밀번호 확인이 입력되지 않았을 때
        if(memberPwConfirm.value.trim().length == 0){
            pwMessage.innerText = "유효한 비밀번호 형식입니다.";
            pwMessage.classList.add("confirm");
            pwMessage.classList.remove("error");
        
        } else{
            // 비밀번호가 유효하게 작성된 상태에서
            // 비밀번호 확인이 입력되어 있을 때

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

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

                checkObj.memberPwConfirm = false;
            }

        }

    } else { // 유효하지 않은 경우

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

        checkObj.memberPw = false;
    }
})

---

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

🍄 signUp.js

// 비밀번호 확인 유효성 검사
memberPwConfirm.addEventListener("input", ()=>{

    if(checkObj.memberPw){ // 비밀번호가 유효하게 작성된 경우에

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

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

            checkObj.memberPwConfirm = false;
        }

    } else{ // 비밀번호가 유효하지 않은 경우
        checkObj.memberPwConfirm = false;
    }

})

---

🌱 닉네임 유효성 검사

🍄 signUp.js

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

// 닉네임이 입력이 되었을 때
memberNickname.addEventListener("input", ()=>{
    
    // 닉네임 입력이 되지 않은 경우
    if(memberNickname.value.trim().length == 0){
        nickMessage.innerText = "한글,영어,숫자로만 2~10글자";
        nickMessage.classList.remove("confirm", "error"); // 검정 글씨
        
        checkObj.memberNickname = false; // 빈칸 == 유효 X
        memberNickname.value = "";

        return;
    }
    
    // 정규 표현식으로 유효성 검사
    const regEx = /^[가-힣\w\d]{2,10}$/;

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

        checkObj.memberNickname = true;

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

        checkObj.memberNickname = false;
    }
})

---

🌱 전화번호 유효성 검사

🍄 signUp.js

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

// 전화번호가 입력되었을 때
memberTel.addEventListener("input", ()=>{
    
    // 전화번호가 입력이 되지 않은 경우
    if(memberTel.value.trim().length == 0){
        telMessage.innerText = "전화번호를 입력해주세요.(- 제외)";
        telMessage.classList.remove("confirm", "error"); // 검정 글씨
        
        checkObj.memberTel = false; // 빈칸 == 유효 X
        memberTel.value = "";

        return;
    }

    // 정규 표현식으로 유효성 검사
    const regEx = /^0(1[01679]|2|[3-6][1-5]|70)\d{3,4}\d{4}$/;

    if(regEx.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;
    }

})

---

마지막으로 회원 가입 form 태그가 제출될 때 checkObj의 모든 value가 true인지만 검사하면 끝!

🌱 회원 가입 form 태그가 제출되었을 때

🍄 signUp.js

// 회원 가입 form 태그가 제출되었을 때
document.getElementById("signUpFrm").addEventListener("submit", e=>{

    // checkObj에 모든 value가 true인지 검사

    // (배열용 for문)
    // for ... of : 향상된 for문
    //      -> iterator(반복자) 속성을 지닌 배열, 유사 배열 사용 가능

    // (객체용 for문)
    // *** for ... in ***
    // -> JS 객체가 가지고 있는 key를 순서대로 하나씩 꺼내는 반복문

  
    for(let key in checkObj){
        
        if(!checkObj[key]){ // 각 key에 대한 value(true/false)를 얻어와서
              // false인 경우 == 유효하지 않다!

            switch(key){
                case "memberEmail" : alert("이메일이 유효하지 않습니다."); break;

                case "memberPw" : alert("비밀번호가 유효하지 않습니다."); break;

                case "memberPwConfirm" : alert("비밀번호가 확인되지 않았습니다."); break;

                case "memberNickname" : alert("닉네임이 유효하지 않습니다."); break;

                case "memberTel" : alert("전화번호가 유효하지 않습니다."); break;
            }

            // 유효하지 않은 input 태그로 focus 이동
            // - key를 input의 id와 똑같이 설정했음
            document.getElementById(key).focus();
            
            // form 태그 기본 이벤트 제거
            e.preventDefault();
            return; // 함수 종료
        }
    }
})