[JS] chapter12. 유효성 검사/ <실습> 회원가입 구현 / classList error

환테크 2023. 1. 6. 11:46

유효성 검사

특정 값은 반드시 입력해야 합니다. (아이디, 이메일, 비밀번호, 이름, 전화번호 등)
비밀번호는 n 자릿수 이상이어야 하고, 숫자나 특수문자를 반드시 포함해야 합니다.
비밀번호와 비밀번호 확인란에 입력된 문자가 동일해야 합니다.
신용카드의 경우, 입력한 신용카드의 번호가 유효해야 합니다.

이러한 것들을 유효성 검사라고 한다.

----------------------------------------------------------------------------------------------------------------------------------------------------------------

<실습> 유효성 검사를 통한 회원가입 구현 해보기

추가적으로 비밀번호 입력 UI를 HTML을 이용해 만드세요.
비밀번호 일치 여부를 검사하는 함수를 자바스크립트로 작성하세요.
- 함수 isMatch 는 문자열 두 개를 입력으로 받고, boolean 타입을 리턴합니다.
비밀번호 일치 여부에 따른 시각적 피드백을 제공하세요.
모든 테스트를 통과하세요.
모든 테스트를 통과한 후에는 CSS로 회원가입 페이지를 디자인 해보세요.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>유효성 검사</title>
    <link rel="stylesheet" href="global-style.css" />
    <link rel="stylesheet" href="style.css" />
    <link
      href="//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css"
      rel="stylesheet"
      type="text/css"
    />
    <script src="validator.js"></script>
  </head>

  <body>
    <main>
      <img
        class="logo"
        src="./images/fb-logo.png"
        alt="CODE_STATES_LOGO"
      />

      <fieldset>
        <input type="text" id="username" placeholder="아이디" />
      </fieldset>

      <div class="success-message hide">사용할 수 있는 아이디입니다</div>
      <div class="failure-message hide">아이디는 네 글자 이상이어야 합니다</div>

      <fieldset>
        <input type="password" id="password" placeholder="비밀번호" />
      </fieldset>

      <fieldset>
        <input
          type="password"
          id="password-retype"
          placeholder="비밀번호 확인"
        />
      </fieldset>

      <div class="mismatch-message hide">비밀번호가 일치하지 않습니다</div>
      <div class="clear-message hide">비밀번호가 일치합니다</div>

      <fieldset class="signup">
        <button>회원가입</button>
      </fieldset>
      <script src="script.js"></script>
    </main>
  </body>
  
</html>

style.css

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: 'Spoqa Han Sans Neo', 'sans-serif';
  color: var(--gray-900);
  background-color: var(--white);
  font-size: 16px;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-image: linear-gradient(
      to bottom,
      rgba(53, 112, 239, 0.3),
      rgba(255, 255, 255, 0)
    ),
    url('./images/lazy.gif');
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px;
  box-shadow: var(--big-box);
  border: 1px solid var(--gray-10);
  border-radius: 4px;
}

h1 {
  text-align: center;
  font-size: 36px;
}

fieldset {
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  border-color: var(--gray-10);
  justify-content: center;
  margin: 4px;
  padding: 8px 12px;
}

fieldset > label {
  display: inline-block;
  width: 112px;
}

main > div {
  color: var(--peach-600);
  font-size: 12px;
  padding-left: 20px;
}

.logo {
  margin: 12px auto 36px;
  width: 144px;
}

button {
  cursor: pointer;
  border: none;
  border-radius: 4px;
  width: 12rem;
  height: 2.25rem;
  color: var(--white);
  background-color: var(--coz-blue-700);
  font-size: 14px;
  transition: all 0.3s;
}

button:hover {
  background-color: var(--coz-blue-500);
}

input {
  border: none;
  width: 12rem;
  font-size: 14px;
}

input:focus {
  outline: none;
}

.hide {
  display: none;
}

.signup {
  border: none;
}

global-style.css

:root {
  /* color */
  --bluish-gray-10: #f5f7f9;
  --bluish-gray-50: #f2f4f7;
  --bluish-gray-100: #eceef3;
  --bluish-gray-200: #dfe3ec;
  --bluish-gray-300: #ccd3e0;
  --bluish-gray-400: #b2bdd1;
  --bluish-gray-500: #8c9cba;
  --bluish-gray-600: #667ba3;
  --bluish-gray-700: #455573;
  --bluish-gray-800: #262f40;
  --bluish-gray-900: #0f1319;
  --white: #ffffff;
  --gray-10: #f7f7f7;
  --gray-50: #f2f2f2;
  --gray-100: #f0f0f0;
  --gray-200: #e6e6e6;
  --gray-300: #d6d6d6;
  --gray-400: #c2c2c2;
  --gray-500: #a3a3a3;
  --gray-600: #858585;
  --gray-700: #5c5c5c;
  --gray-800: #333333;
  --gray-900: #141414;
  --black: #000000;
  --coz-purple-10: #f3f2fd;
  --coz-purple-50: #efedfc;
  --coz-purple-100: #e8e5fb;
  --coz-purple-200: #d8d3f8;
  --coz-purple-300: #c0b9f4;
  --coz-purple-400: #a296ee;
  --coz-purple-500: #7361e5;
  --coz-purple-600: #452cdd;
  --coz-purple-700: #2c1a9e;
  --coz-purple-800: #190e58;
  --coz-purple-900: #0a0623;
  --coz-blue-10: #f2f5fd;
  --coz-blue-50: #edf1fc;
  --coz-blue-100: #e4ebfb;
  --coz-blue-200: #d2ddf9;
  --coz-blue-300: #b8c9f5;
  --coz-blue-400: #94adf0;
  --coz-blue-500: #5e85e8;
  --coz-blue-600: #295ce0;
  --coz-blue-700: #173ea1;
  --coz-blue-800: #0d2259;
  --coz-blue-900: #050e24;
  --coz-orange-50: #fff2e9;
  --coz-orange-100: #ffebde;
  --coz-orange-200: #ffe1cc;
  --coz-orange-300: #ffcead;
  --coz-orange-400: #ffb685;
  --coz-orange-500: #ff9247;
  --coz-orange-600: #ff6e0a;
  --coz-orange-700: #b84b00;
  --mint-50: #ebfff7;
  --mint-100: #e0fff2;
  --mint-200: #ccffea;
  --mint-300: #adffdd;
  --mint-400: #84ffcb;
  --mint-500: #47ffb2;
  --mint-600: #0aff98;
  --mint-700: #00b86a;
  --mint-800: #00663b;
  --peach-50: #ffeeeb;
  --peach-100: #ffe6e0;
  --peach-200: #ffd5cc;
  --peach-300: #ffbcad;
  --peach-400: #ff9b85;
  --peach-500: #ff6947;
  --peach-600: #ff360a;
  --peach-700: #b82100;
  --blackalpha-10: #00000008;
  --blackalpha-50: #0000000a;
  --blackalpha-100: #0000000f;
  --blackalpha-200: #0000001a;
  --blackalpha-300: #00000029;
  --blackalpha-400: #0000003d;
  --blackalpha-500: #0000005c;
  --blackalpha-600: #0000007a;
  --blackalpha-700: #000000a3;
  --blackalpha-800: #000000cc;
  --blackalpha-900: #000000eb;
  /* boxShadow */
  --15px: 0px 0px 15px 0px #00000026;
  --7px: 0px 0px 7px 0px #00000040;
  --big-box: 0px 3px 6px -4px #0000001f, 0px 6px 16px 0px #00000014,
    0px 9px 28px 8px #0000000d;
}

script.js

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

const elPassword = document.querySelector('#password')
const elPasswordRe = document.querySelector('#password-retype')
const elMismatch = document.querySelector('.mismatch-message')
const clearmatch = document.querySelector('.clear-message')
const btn = document.querySelector('.signup')

elInputUsername.onkeyup = function () {
  if (isMoreThan4Length(elInputUsername.value)){
    // 성공 메세지 출력
    elSuccessMessage.classList.remove('hide')
    // 실패 메세지 숨기기
    elFailureMessage.classList.add('hide')
  }
  else{
    // 성공 메세지 숨기기
    elSuccessMessage.classList.add('hide')
    // 실패 메시지 출력
    elFailureMessage.classList.remove('hide')

  }
}

elPasswordRe.onkeyup = function(){
  if(isMatch(elPassword.value, elPasswordRe.value)){
      elMismatch.classList.add('hide')
      clearmatch.classList.remove('hide')
  }else{
      elMismatch.classList.remove('hide')
      clearmatch.classList.add('hide')
  }
}

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

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

출력화면

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

ERROR

실습하던 중 이런 에러를 만났다.

에러 해결 방법

1. body 소스 뒤로 scipt소스를 넣었는지 확인 해보기

구글링 했을 때 이게 문제래서 봤는데 아니였다.

2. id/class 명이 정확하게 기입 됐는지 확인 해보기

class 명이 잘못 복붙 되어있어서 난 에러였다.

작은 실수지만 한번 놓치면 함수마다 콘솔로그 쳐봐야하는 귀찮음이 있으니 꼭 html

선언 변수로 잘 기입됐는지 더블 체크 해보자