[JavaScript] 유효성 검사

Yuhallo·2023년 1월 8일

목록 보기

5/9

<유효성 검사 과제로 만든 인스타그램 회원가입페이지 목업>

🧡 유효성 검사

Form validation, 사용자가 입력한 데이터 값이 특정 규칙에 맞게 입력되었는 지 검증하는 것입니다. 사용자가 실수로 유효하지 않은 데이터 값을 입력하면 부적합하다고 오류를 알려줍니다.

value

DOM으로 input type="text" 또는 textearea 같은 엘리먼트 입력 값을 설정하거나, 얻어내려면 value 속성을 사용할 수 있습니다. 해당 엘리먼트를 querySelector을 이용해 가져온 후 value속성으로 접근하거나 값을 설정할 수 있습니다.

console.log(document.querySelector('#username').value);
//username에 입력된 값을 가져옵니다.
document.querySelector('#username').value = 'UHA';
//username의 값을 'UHA'로 설정합니다.

display

해당 엘리먼트의 표현방식을 결정합니다.

display:inline : 기본값입니다. 요소를 inline 요소처럼 표시합니다. 즉 줄바꿈되지 않습니다.
display:block : 요소를 block 요소처럼 표시합니다. 요소의 앞 뒤로 줄바꿈 됩니다.
display:none : 박스가 자체가 생성되지 않습니다. 따라서 웹페이지에 공간을 차지하지 않습니다.
display:inline-block : inline인데 내부는 block 처럼 표시하는 것입니다. 즉 박스모양이 inline처럼 옆으로 늘어섭니다.

🎀 vs. visibility
어떤 요소를 보이게 할지, 숨길지를 결정합니다. display : none가 박스 그 자체가 생성되지 않는 것과 다르게, visibility : hidden은 보이지 않지만 박스는 그대로 있기 때문에, 투명하게 공간을 차지하고 있습니다.

관심사 분리

스타일을 적용할 때 관심사 분리에 따라 CSS 클래스를 이용해 간접적으로 바꾸는 것을 권장합니다.

디자인의 디테일한 요소가 자바스크립트 코드에 담기는 것을 방지합니다.
따로 클래스를 이용하면, 해당 디자인을 디자이너가 쉽게 바꿀 수 있습니다.
CSS는 디자인, 자바스크립트는 로직에 집중할 수 있게 합니다.

이벤트

DOM에서 이벤트는 웹 브라우저에서 DOM 요소와 사용자가 상호작용 하는 것을 말합니다. 즉 마우스를 클릭하거나, 키보드를 누르는 등의 사용자 액션에 의해 발생합니다.
브라우저 창 크기를 조절하거나, 스크롤 하는 것도 그의 일종입니다.

이벤트 핸들러

이벤트가 발생할 때 실행되는 함수를 이벤트 핸들러라고 부릅니다. 특정 요소에서 발생하는 이벤트를 처리하기 위해 사용합니다.
이벤트와 관련된 속성은 'on'이라는 접두어가 붙습니다.
이벤트 속성에 이벤트 핸들러를 등록할 때에는 함수 그 자체로 등록해야 하고, 함수 실행을 등록하지 않습니다. (함수명() X)

💚 [과제]

로그인 페이지 유효성 검사하기

아이디입력

아이디를 입력받았을 때 4글자 이상이면 성공메시지가 보이고, 4글자 미만을 입력하면 실패 메시지를 보이게 합니다.

//아이디 입력
elInputUsername.onkeyup = function() {  //이벤트 핸들러
  console.log(elInputUsername.value)

  if(isMoreThan4Length(elInputUsername.value)) {  
    //4글자이상이면 성공메시지를 띄우고 실패메시지를 숨긴다.

    elSucessMessage.classList.remove('hide');
    elFailureMessage.classList.add('hide');
  }else{
    //4글자 미만이면 성공메시지를 숨기고, 실패메시지를 띄운다.

    elSucessMessage.classList.add('hide');
    elFailureMessage.classList.remove('hide');
  }
}

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

비밀번호 입력

비밀번호 입력창과 비밀번호 확인 입력창의 값이 다를 때 'missmatch-message'를 제공합니다.

//비밀번호 입력
let elPassword = document.querySelector('#password')
let elPasswordRetype = document.querySelector('#password-retype')
let elMissmatchMessage = document.querySelector('.mismatch-message')

//비밀번호를 입력했을 때
elPasswordRetype.onkeyup = function() {
  if (isMatch(elPassword.value, elPasswordRetype.value)) {  //만약 비밀번호칸과 비밀번호확인칸의 값이 같다면
    console.log(true)
    elMissmatchMessage.classList.add('hide')  // 실패메시지를 띄운다.
  }else{
    console.log(false)
    elMissmatchMessage.classList.remove('hide') // 아니면 실패메시지를 숨긴다.
  }
}

//비밀번호 확인 함수
function isMatch (password1, password2) {
  return password1 === password2
}

(추가) 회원가입 버튼 활성/비활성

입력 폼의 조건을 모두 만족시켰을 때 버튼이 활성화 됩니다. 그 전까지는 비활성화상태로 있습니다.

//회원가입 버튼
const button = document.querySelector('.btn-signup');

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

function validate () {
  if(isMoreThan4Length(elInputUsername.value) &&
     isMatch(elPassword.value, elPasswordRetype.value) &&
     elPassword.value) {  // 조건을 모두 충족하면 활성화한다.
      button.classList.add('able');  //클래스를 가져오는 거라 선택자클래스로 넣으면 안된다!!
     }else{
      button.classList.remove('able');
     }
}