Today I Learned (TIL)<DOM> 회원가입 유효성 검사

심화과정 첫 학습내용은 DOM으로 혼자 공부할 때 react를 사용하지 않고 DOM으로만 개발할 때 어려움을 겪었는데

학습을 하다보니 중구난방으로 있었던 지식들이 체계적으로 정리되는 느낌이다.

DOM이란 Document Object Model로
HTML 요소를 js object처럼 조작할 수 있는 모델이다.
DOM에서는 CRUD와 Append를 더해 HTML을 조작할 수 있다.
C-createElement
R-querySelector, querySelectorAll,
U-textContext, id, classList, setAttribute
D-remove, removeChild, innerHTML="", textContent=""
Append-appendChild

DOM을 사용하여 회원가입을 구현해봤는데 기존에 리액트를 통해 구현한 것과 크게 다르지 않다고 생각한다.

<h1>sign up</h1>
    <fieldset>
      <label>아이디</label>
      <input type="text" id="username" />
      <div class="failure-message hide">
        아이디는 네 글자 이상이어야 합니다.
      </div>
      <div class="success-message hide">사용할 수 있는 아이디 입니다.</div>
    </fieldset>
    <fieldset>
      <label>password</label>
      <input type="password" id="password" />
    </fieldset>
    <fieldset>
      <label>password_check</label>
      <input type="password" id="password_check" />
      <div class="matched hide">비밀번호가 일치합니다.</div>
      <div class="notMatched hide">비밀번호가 일치하지 않습니다.</div>
    </fieldset>
    <fieldset>
      <button class="signupBtn" disabled>Sign up</button>
    </fieldset>
    <script src="script.js"></script>
  </body>

포인트 1:

어제 모의면접에서 말했듯 script태그는 는 body 태그가 끝나기 직전에 위치해야한다.

포인트 2: label, fieldset 과 같이 시맨틱 태그를 사용한다

포인트3:

유효성 검사를 진행할 때 나올 수 있는 경고문은 모두 작성해야한다. 이 후 css 파일을 통해 display: none으로 보이지 않게 처리해준다.

let elInputUsername = document.querySelector("#username");

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

let password = document.querySelector("#password");
let password_check = document.querySelector("#password_check");
let matchedMessage = document.querySelector(".matched");
let notMatchedMessage = document.querySelector(".notMatched");
let signupBtn = document.querySelector(".signupBtn");

html에서 작성한 코드는 위와 같이 querySelector를 사용하여 가져올 수 있다.

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

function isMoreThan4(value) {
  return value.length >= 4;
} //4자가 넘는지 확인 

이벤트 핸들러를 넣을때는 다음과 같아야한다.

.event =function(){}

위의 코드는 username에 키를 입력했을 때 (onkeyup) username에 해당되는 부분이 4자리를 넘으면 성공메세지에 hide를 없애고 실패메세지에 hide를 붙여준다.

추가도전 과제로 비밀번호 유효성 검사와 회원가입 버튼 비활성화를 진행하였다.

우선 비밀번호 유효성 검사는 비밀번호와 비밀번호 확인이 일치하지 않을 때 비밀번호가 일치하지 않습니다.라는 문구가 뜨고

비밀번호와 비밀번호 확인이 일치하는 경우 비밀번호가 일치합니다.라는 문구가 뜨도록 구현하였다.

위의 유저네임과 같이 비밀번호 확인란 밑에

<fieldset>
      <label>password_check</label>
      <input type="password" id="password_check" />
      <div class="matched hide">비밀번호가 일치합니다.</div>
      <div class="notMatched hide">비밀번호가 일치하지 않습니다.</div>
    </fieldset>

이렇게 성공메세지와 실패메세지를 동시에 작성하고 css를 통해 display:none으로 처리해주었다.

이 후 password_check에 이벤트를 걸어 비밀번호와 비밀번호확인이 일치한 경우 그리고 그렇지 못한 경우로 나눠 조건을 걸어주었다.

password_check.onkeyup = function () {
  if (password.value === password_check.value) {
    matchedMessage.classList.remove("hide");
    notMatchedMessage.classList.add("hide");
  } else if (password_check.value !== password.value) {
    matchedMessage.classList.add("hide");
    notMatchedMessage.classList.remove("hide");
  }
}

마지막으로 회원가입 버튼 비활성화를 구현했는데 위와 같은 로직으로 생각해봤으나 css를 사용하지 않고 disabled만 사용해서 구현할 수 있을 것 같아 그렇게 도전해보았다.

우선

<fieldset>
      <button class="signupBtn" disabled>Sign up</button>
    </fieldset>

버튼을 disabled 처리를 해준 다음

마지막 input인 비밀번호 확인에 도달했을 때 , 유저네임과 비밀번호 그리고 비밀번호 확인에 값이 있는 경우 disabled를 해지해주었다.

DOM