유효성 검사 (email, password)

 

App.js (유효성 검사 실행을 불러올 컴포넌트)

유효성 검사를 실행할 email과 password input form을 불러온다.

form을 submit 할 버튼에 addEventListener로 유효성 검사를 실행할 VerifyForms class의 instance를 만든다.

import VerifyForms from 'VerifyForms.js';

class App {
  constructor({ $target }) {
    this.$target = $target;
    this.$email = document.querySelector("#email");
    this.$password = document.querySelector("#password");
    this.$btn = document.querySelector("#btn");
    
    this.initialSetting();
  }
  
  initialSetting = () => {
    this.$btn.addEventListener("click", this.submit);
  }
  
  submit = () => {
    new VerifyForms({
      $email: this.$email,
      $password: this.$password,
    });
  }
  
}

export default App;

 

VerifyForms.js

각각의 field의 value를 가져와 유효성 검사를 실행한다.

class VerifyForms {
  constructor({ $email, $password }) {
    this.$email = $email;
    this.$password = $password;
    this.render();
  }

  // 이메일 입력조건 (return {boolean))
  verifyEmail = () => {
    const value = this.$email.value;
    const regex = /^[a-zA-Z0-9\.]+@[a-z0-9-_\.]+\.co$/;
    return regex.test(value.trim());
  };

  // 패스워드 길이 (return {boolean))
  verifyPasswordSize = (min, max) => {
    const value = this.$password.value;
    const len = value.length;
    return len < min || len > max ? false : true;
  };

  // 패스워드 입력조건 (return {boolean))
  verifyPassword = () => {
    const value = this.$password.value;
    const regex = /^(?=.*[a-zA-Z])(?=.*[!@~])(?=.*[0-9])[a-zA-Z0-9!@~]{8,20}$/;
    return regex.test(value.trim());
  };

  // 폼 필드 입력 여부 (return {boolean))
  verifyEnteredInFeild = () => {
    return [this.$email, this.$password].every(
      (input) => input.value.trim() !== ""
    );
  };
  
  // 로그인 성공시
  successVerified = () => {
    alert("로그인 성공!");
  }
  
  render = () => {
    const validations = [
      {
        fn: this.verifyEnteredInFeild,
        errMsg: "아이디 혹은 비밀번호가 입력되지 않았습니다.",
      },
      {
        fn: this.verifyEmail,
        errMsg: "이메일 형식이 올바르지 않습니다.",
      },
      {
        fn: this.verifyPasswordSize(8, 20),
        errMsg: "비밀번호는 최소 8자 이상, 최대 20자 이하로 구성해야 합니다.",
      },
      {
        fn: this.verifyPassword,
        errMsg: "비밀번호는 영문, 숫자, 특수문자를 모두 포함해야 합니다.",
      },
    ];

    for (let validation of validations) {
      if (!validation.fn.call(this)) {
        alert(validation.errMsg);
        return;
      }
    }
    
    this.successVerified();
  };
}

export default VerifyForms;

 

유효성 검사 조건의 예시는 다음과 같다.

email	password
1. 이메일 입력 조건 이메일은 4가지 조합으로만 입력이 가능하다. 영문 대소문자 영문 대소문자 + 숫자 영문 대소문자 + 특수 문자 영문 대소문자 + 숫자 + 특수문자 특수 문자의 경우 . (dot)만 사용할 수 있다. 2. @ 이후 이메일 주소의 도메인 입력 조건 .(dot) 이전의 도메인은 4가지 조합으로만 입력이 가능하다. 영문 소문자 영문 소문자 + 숫자 영문 소문자 + 특수 문자 영문 소문자 + 숫자 + 특수문자  특수 문자의 경우 ., -, _ 만 입력 가능하다. 도메인은 무조건 .co 만 입력 가능하다. 3. 문자의 순서는 고려하지 않는다. 4. 이메일 입력 조건 예시 JaneDoe.2@example.co jdoe3@example_1.co	1. 비밀번호 입력 조건 비밀번호는 8자 이상 20자 이하로 구성한다. 영문 대/소문자, 숫자, 그리고 특수문자가 최소 1개 이상 포함되어야 한다. 특수문자는 !, @, ~ 만 입력 가능하다. 2. 비밀번호 입력 조건 예시 P@ssw0rd20chars T3stP@ssw0rd!

 

const regex = /^[a-zA-Z0-9\.]+@[a-z0-9-_\.]+\.co$/;	const regex = /^(?=.*[a-zA-Z])(?=.*[!@~])(?=.*[0-9])[a-zA-Z0-9!@~]{8,20}$/;
^ : 문자열의 시작을 나타낸다. [a-zA-Z0-9\.]+ : 최소한 하나 이상의 영문 대소문자, 숫자, 또는 .(dot)이 포함되어야 한다. @ : @ 문자가 포함되어야 한다. [a-z0-9-\.]+ : 최소한 하나 이상의 영문 소문자, 숫자, 특수 문자 ``, _, .가 포함되어야 한다. \.co : 문자열이 .co로 끝나야 한다. $ : 문자열의 끝을 나타낸다.	(?=.*[a-zA-Z]): 최소한 하나 이상의 영문 대/소문자가 포함되어야 한다. (?=.*[!@~]): 최소한 하나 이상의 특수문자(!, @, ~)가 포함되어야 한다. (?=.*[0-9]): 최소한 하나 이상의 숫자가 포함되어야 한다. [a-zA-Z0-9!@~]{8,20}: 영문 대/소문자, 숫자, 특수문자(!, @, ~)가 8자 이상 20자 이하로 구성되어야 한다.