DOM을 이용한 유효성 검증 스프린트

회원가입시 아이디와 비밀번호에 대한 유효성을 검증하는 스프린트를 진행하였다.

index.html

<body>
    <h1>회원가입</h1>
    <fieldset>
      <div>
      <label>아이디</label>
      <input type="text" id="username" required />
      <div class="failure-message hide">아이디는 네 글자 이상이어야 합니다</div>
      <div class="success-message hide">사용할 수 있는 아이디입니다</div>
      <div class="validation hide">아이디는 영어와 숫자로만 가능합니다</div>
    </div>
    </fieldset>
    <fieldset>
      <label>비밀번호</label>
      <input type="password" id="password" required />
      <div class="validation-ps hide">
        최소 8자 이상이면서, 알파벳과 숫자 및 특수문자는 최소 하나 포함
      </div>
    </fieldset>
    <fieldset>
      <label>비밀번호 확인</label>
      <input type="password" id="password-retype" required />
      <div class="mismatch-message hide">두 비밀번호가 일치하지 않습니다</div>
    </fieldset>
    <fieldset>
      <button id="submit">회원가입</button>
    </fieldset>
    <script src="script.js"></script>
  </body>

먼저 DOM으로 HTML을 조작하기 위해 조작하고자 하는 input이나 div에 id,class를 지정해주었다.

script.js

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

let elpassword = document.querySelector("#password");
let elpasswordRe = document.querySelector("#password-retype");
let mismatchMessage = document.querySelector(".mismatch-message");

let elValidation = document.querySelector(".validation");
let elValidationPs = document.querySelector(".validation-ps");

let submitBtn = document.querySelector("#submit");

먼저 DOM으로 조작할 엘리먼트들을 querySelector로 불러와 변수에 저장한다.

// 4글자 이상인지
function isMoreThan4Length(value) {
  return value.length >= 4;
}

// 패스워드가 일치 하는지
function isMatch(password1, password2) {
  if (password1 == password2) {
    return true;
  } else {
    return false;
  }
}

// [유효성 검증 함수]: 영어 또는 숫자만 가능
function onlyNumberAndEnglish(str) {
  return /^[A-Za-z][A-Za-z0-9]*$/.test(str);
}

// [유효성 검증 함수]: 최소 8자 이상하면서, 알파벳과 숫자 및 특수문자(@$!%*#?&) 는 하나 이상 포함
function strongPassword(str) {
  return /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/.test(
    str
  );
}

이벤트 안에서 사용할 함수는 4가지이다. (주석 참고)
다음으로 각각의 입력 상황에 따른 이벤트 코드를 보도록 하자.

id 입력 시

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

  if (onlyNumberAndEnglish(elInputUsername.value)) {
    elValidation.classList.add("hide");
  } else {
    elValidation.classList.remove("hide");
  }

  if (
    isMoreThan4Length(elInputUsername.value) &&
    onlyNumberAndEnglish(elInputUsername.value)
  ) {
    elSuccesssMessage.classList.remove("hide");
    alert('성공');
  } else {
    elSuccesssMessage.classList.add("hide");
  }
};

조건에 따라 DOM을 이용해 class명을 변경해준다.
ex) <div class="success-message hide">의 경우 초기값이 success-message hide 이므로
elSuccesssMessage.classList.remove("hide");가 실행되면 hide가 지워져 div가 보이게 된다.

비밀번호 입력 시

elpassword.onkeyup = function () {
  if (strongPassword(elpassword.value)) {
    elValidationPs.classList.add("hide");
  } else {
    elValidationPs.classList.remove("hide");
  }
  if (isMatch(elpassword.value, elpasswordRe.value)) {
    mismatchMessage.classList.add("hide");
  } else {
    mismatchMessage.classList.remove("hide");
  }
};

비밀번호 확인 입력 시

elpasswordRe.onkeyup = function () {
  if (isMatch(elpassword.value, elpasswordRe.value)) {
    mismatchMessage.classList.add("hide");
  } else {
    mismatchMessage.classList.remove("hide");
  }
};

회원가입 버튼 클릭 시

submitBtn.addEventListener("click", function () {
  if (
    isMoreThan4Length(elInputUsername.value) &&
    onlyNumberAndEnglish(elInputUsername.value) &&
    strongPassword(elpassword.value) &&
    isMatch(elpassword.value, elpasswordRe.value)
  ) {
    alert("축하합니다!");
  } else if (
    isMoreThan4Length(elInputUsername.value) === false ||
    onlyNumberAndEnglish(elInputUsername.value) === false
  ) {
    alert("id를 다시 확인하세요!");
  } else if (
    strongPassword(elpassword.value) === false ||
    isMatch(elpassword.value, elpasswordRe.value) === false
  ) {
    alert("비밀번호를 다시 확인하세요!");
  }
});

스프린트를 진행하며
DOM 사용은 querySelector와 classList.add, remove정도로 많지 않아 쉽게 사용할 수 있었다.
유효성 검증을 오랜만에 해봐 조건을 지정해주는게 조금 헷갈렸지만 어렵지 않게 진행할 수 있었고 나름 재미도 있었다.

Author And Source

이 문제에 관하여(DOM을 이용한 유효성 검증 스프린트), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@dnwlaos23/DOM을-이용한-유효성-검증-스프린트

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

DOM을 이용한 유효성 검증 스프린트

Author And Source

좋은 웹페이지 즐겨찾기