Unit 10. [실습] 회원가입 페이지 유효성 검사

📣 유효성 검사

1️⃣ 아이디는 4글자 이상이어야 한다.

✔️ isMoreThan4Length(value) 함수 구현

✔️ value의 길이가 4 이상일 경우 true, 미만인 경우 false 리턴

function isMoreThan4Length(value) {
  return value.length >= 4;
}

 

2️⃣ 비밀번호는 숫자와 특수문자가 포함되어야 한다.

✔️ checkForm(value) 함수 구현

✔️ value에 숫자와 특수문자가 각각 하나라도 포함되면 true 리턴

✔️ isNaN(value) 함수는 is Not a Number로, 문자열에 숫자가 하나라도 포함될 경우 true를 리턴

let special = /[~!@#$%^&*()_+|<>?:{}]/; // 특수문자 정규식 사용

function checkForm(value) { // 비밀번호 형식 확인하는 함수
  let numberIn = false;
  let specialIn = false;
  for(let i=0; i<value.length; i++){	// 하나하나 돌면서 숫자 하나라도 포함됬는지 확인.
    if(isNaN(value[i]) === false){
      numberIn = true;
    }
  }
  if(special.test(value)){	// 특수문자 포함하고 있는지 확인
    specialIn = true;
  }
  if(numberIn === true && specialIn === true){
    return true;
  }
  else{
    return false;
  }
}

 

 

3️⃣ 비밀번호와 비밀번호 확인 값은 일치해야 한다.

✔️ isMatch(password1, password2) 함수 구현

✔️ password1과 password2가 일치하면 true 리턴

function isMatch (password1, password2) { // 비밀번호와 비밀번호 확인이 같은지 확인하는 함수
  if(password1 === password2){
    return true;
  }
  else{
    return false;
  }
}

 

 

4️⃣ 필수 입력란에 빈칸이 있으면 '회원가입' 버튼이 비활성화되고 빈칸이 없으면 '회원가입' 버튼이 활성화 된다.

✔️ isFull() 함수 구현

function isFull() { 
  if(
    (elInputUsername.value.length > 0 &&
    elInputPassword.value.length > 0 &&
    elInputRePassword.value.length > 0 
    )
  ){
    elSignupBtn.classList.add('isActived');
  }
  else {
    elSignupBtn.classList.remove('isActived');
  }
}

 

 

5️⃣ 필수 입력란에 빈칸이 있으면 alert창을 띄운다.

✔️ alertFull() 함수 구현

function alertFull() {
  if(
    (elInputUsername.value.length > 0 &&
    elInputPassword.value.length > 0 &&
    elInputRePassword.value.length > 0)
  ){
    return true;
  }
  else{
    alert("정보를 모두 입력해주세요.");
    return false;
  } 
}

 

 

5️⃣ .onkeyup 사용해서 키보드로 입력할때 마다 실행되게 구현

elPhoneNumber1.onkeyup = function() {
  if(isNumber(elPhoneNumber1.value) === false){	// 전화번호에 숫자만 있는지 확인
    console.log(elPhoneNumber1.value);
    elInputNumberMessage.classList.remove('hide');
  }
  else {
    elInputNumberMessage.classList.add('hide');
  }
  isFull();
}

 

 

6️⃣ 숫자인지 확인하는 함수

🚨 'e'를 숫자로 탐지하는 예외 상황 발생

// 전화번호가 숫자인지 확인하는 함수
function isNumber(value) {  
  if(isNaN(value) === true){
    return false;
  }
  else {
    return true;
  }
}

 

 

7️⃣ 전화번호 마지막 칸 입력 이벤트

✔️ 첫번째, 두번째칸도 똑같이 구현(세번 다 1,2,3번째 칸을 모두 확인해줘야 예외상황이 발생하지 않는다.)

// 전화번호 마지막 칸 입력할 때 이벤트(두,세번째도 같이 확인)
elPhoneNumber3.onkeyup = function() {
  if(isNumber(elPhoneNumber3.value) === false){
    console.log(elPhoneNumber3.value);
    elInputNumberMessage.classList.remove('hide');
  }
  else if(isNumber(elPhoneNumber2.value) === true && isNumber(elPhoneNumber1.value) === true && isNumber(elPhoneNumber3.value) === true) {
    elInputNumberMessage.classList.add('hide');
  }
  isFull();
}

 

📣 실행 화면

➰ CSS 는 추후에 더 수정할 예정