회원가입 - 유효성 검사 기능

✔️webapp(resources(js(signUp))) → 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
  }

})

✔️webapp(resources(js(signUp))) → 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;
  }
})
// 비밀번호 확인 유효성 검사
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;
  }

})

✔️webapp(resources(js(signUp))) → 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;
  }
})

✔️webapp(resources(js(signUp))) → 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;
  }

})

const checkObj = {
    "memberEmail" : false,
    "memberPw" : false,
    "memberPwConfirm" : false,
    "memberNickname" : false,
    "memberTel" : false
};

flag느낌처럼 사용할 수 있음
유효성 검사 진행 여부 확인용 객체
→ 모든 value가 true인 경우에만 회원 가입 진행

1) 원하는 value를 얻어오는 방법
- 객체명.key
- 객체명[key] - 향상된 for문 []
2) 객체에 특정 key가 존재하지 않을 때 추가하기
ex) const obj = {"a" : 1, "b" : 2}
    obj.c = 3;
3) 객체에 특정 key 삭제하기(delete 연산자)
ex) const obj = {"a" : 1, "b" : 2}
    delete obj.b; 
    {"a" : 1}

사용하기!!!
js에서 value 얻어오는 방법 = 객체명.key

근데 for문, 많을 땐? for let in obj 일 땐?
객체명[key]로 가져옴

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

console에서 눈 표시

    // checkObj에 모든 value가 true인지 검사
    // (배열용 for문)
    // for ... of : 향상된 for문
    //      -> iterator(반복자) 속성을 지닌 배열, 유사 배열 사용 가능
    // (객체용 for문)
    // *** for ... in ***
    // -> JS 객체가 가지고 있는 key를 순서대로 하나씩 꺼내는 반복문