[과제] 유효성 검사

 

DOM 연습과제로 회원가입 폼 유효성 검사를 하고 에러 메시지를 띄우는 과제를 수행했다. 

과제 목표
• 아이디에 4글자 이상 입력되지 않으면 에러 메시지 띄우기
• 비밀번호 확인이 비밀번호와 일치하지 않으면 에러 메시지 띄우기
• 아이디에 영숫자 외 다른 문자가 입력되면 에러 메시지 띄우기
• 비밀번호가 8자리 이상, 영숫자 및 특수문자가 하나 이상 포함되지 않으면 에러 메시지 띄우기

 

처음 화면을 띄웠을 때는 에러 메시지가 보이지 않다가

사용자가 input에 글자를 입력하기 시작하면 유효성 조건에 관한 에러 메시지를 띄우고,

조건이 잘 맞으면 에러 메시지를 없애거나 적절한 내용을 입력했다는 메시지를 띄우도록 하는 것이 과제 목표였다.

 

📌 초기 에러 메시지 숨기기

처음에는 에러 메시지가 보이지 않아야 하기 때문에

모든 에러 메시지에 'hide' 클래스를 부여하고

CSS로 해당 클래스에 'display: none'을 주었다.

 

📌 유효성 검사를 수행하는 함수 선언

각각의 조건에 맞는지 여부를 확인하고 boolean을 반환하는 함수를 선언한다.

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

아이디 길이를 확인하는 함수의 예시는 위와 같다. 

function strongPassword(str) {
  return /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/.test(str);
}

아이디는 영숫자만 포함해야 했고,

비밀번호는 길이뿐 아니라 포함돼야 할 문자도 지정하는 유효성 검사를 수행해야 했기 때문에

정규식을 활용해 조건에 맞는지를 확인해야 한다.

작성된 정규식은 영숫자 및 특수문자를 포함해 8자 이상 되는지 여부를 확인한다. 

 

📌 이벤트 감지해 DOM으로 html 요소 조작

사용자가 입력을 시작하는 이벤트는 'onkeyup'으로 감지해 

유효성 검사를 수행하는 함수의 리턴값에 따라 html 요소를 조작하는 함수를 실행하도록 했다.

 

또, 아이디의 경우에는 유효성 검사에 맞지 않으면 실패 메시지, 맞으면 성공 메시지를 띄워야 하기 때문에

실패 메시지를 띄울 때는 성공 메시지를 없애고, 성공 메시지를 띄울 때는 실패 메시지를 지우도록 만들어야 했다.

 

  if (!isMoreThan4Length(nameInput.value)) {
    fail.classList.remove("hide");
    success.classList.add("hide");
  } else fail.classList.add("hide");

위 예시는 아이디가 4글자 이상일 때 실패 메시지를 띄우고('hide' 클래스 삭제) 성공 메시지를 숨기다가('hide' 클래스 추가)

4글자 이상이 되면 실패 메시지를 숨기는 작업을 수행한다.

 

추가로 구현한 기능
• 인풋 focus 상태일 때 필드셋 보더에 그라디언트로 색깔 넣기

 

주어진 과제 외에는 CSS를 작성해 좀 더 보기 편리하고 사용자와 상호작용하는 요소들을 넣어 보았다.

input:focus에 스타일을 넣는 것은 이제 없으면 허전한 스타일링 요소인 것 같다.

나는 solid 색만 넣으면 좀 심심해 보여서 은은한 그라디언트로 보더를 주었다. 

 

input:focus {
  margin: 5px;
  outline: none;
  border: 1px solid transparent;
  background-image: linear-gradient(#fff, #fff), 
  linear-gradient(to right, hsl(249, 99%, 64%), hsl(278, 94%, 30%));
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

나만 알아챌 수 있을 만큼 미미한 그라디언트이지만 전체 분위기와 잘 어울려서 흡족하다!