1/6 일일 정리 유효성 검사

페어와 함께 유효성 검사 과제를 진행하였다. (1/5 ~ 1/6 진행)

회원가입 화면

위와 같은 회원가입 화면에서 유효성 검사를 실시한다.

유효성 검사란 원하는 조건에 맞게 반드시 형식을 맞춰 입력해야 하는 경우가 생길 때 형식에 맞는지 검사하는 것을 말한다.

아이디가 4글자 이하면 '아이디는 4글자 이상이어야 합니다.' 라는 문구가 뜨게하고,

비밀번호 input과 비밀번호확인 input이 다르면 '비밀번호가 일치하지 않습니다.' 라는 문구가 뜨게 하는것이 목표였다.

 

아이디 이벤트 만들기

1. 먼저 필요한 html 요소를 querySelector 메서드로 가지고 와서 변수에 담는다.

let elInputUsername = document.querySelector("#username");
let elSuccessMessage = document.querySelector(".success-message");
let elFailureMessage = document.querySelector(".failure-message");

 

2. 조건을 검사하는 함수를 작성한다. 아이디가 4글자 이상이어야 한다.

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

 

3. 내가 Username input창에 적은 글자의 수가 4글자이상이면 success message를 보여주고(hide 클래스를 지우고) failure message는 지운다.(hide 클래스를 더해준다.) 

 4글자 이하이면 success message를 지우고(hide 클래스를 더하고) failure message는 보여준다.(hide 클래스를 지운다.) 

elInputUsername.onkeyup = function () {
  if (isMoreThan4Length(elInputUsername.value)) {
    elSuccessMessage.classList.remove("hide");
    elFailureMessage.classList.add("hide");
  } else {
    elSuccessMessage.classList.add("hide");
    elFailureMessage.classList.remove("hide");
  }
};

hide 클래스에는 display: none css가 담겨있다.

.hide {
  display: none;
}

 

비밀번호 이벤트 만들기

비밀번호도 아이디와 같은 방식으로 코드를 작성했는데, 조건 함수만 아래와 같이 작성했다.

function isMatch(password1, password2) {
  return password1 === password2;
}

 

회원가입 버튼 비활성화 하기

 위의 두 조건( 아이디 4글자 이상, 비밀번호와 비밀번호 확인이같음)을 만족하지 못하면 회원가입 버튼이 비활성화 되는 것 처럼 보이도록 이벤트를 만들어 보았다.

 

일단 회원가입 버튼의 기본 css를 비활성으로 만들고 조건을 만족했을 때 keyup이벤트를 활용해서 버튼의 class에 'abled'를 더해주었다.

function validate() {
  if (
    isMoreThan4Length(elInputUsername.value) &&	// 아이디 4글자 이상
    isMatch(elPassword.value, elPasswordRetype.value) &&	// 비밀번호 === 비밀번호확인
    elPassword.value	// 비밀번호 input에 값이 있는 경우 추가
  ) {
    elButton.classList.add("abled");
  } else {
    elButton.classList.remove("abled");
  }
}

* 비밀번호 input과 비밀번호확인 input에 둘다 값이 없으면 isMatch함수가 true를 반환하기 때문에 비밀번호 input에 값이 있는 경우를 조건에 추가했다.

 

그리고 이 함수를 addEventListener로 keyup이벤트일 때 작동하도록 한다.

elInputUsername.addEventListener("keyup", validate);
elPassword.addEventListener("keyup", validate);
elPasswordRetype.addEventListener("keyup", validate);

 

abled 클래스가 추가되면 회원가입 버튼이 파란색으로 변하도록 css를 만들었다.

비활성 상태일 때와 활성 상태 일 때

Instagram 처럼 꾸미기

css를 인스타그램처럼 만들어 보았다.