[Js] 로그인 폼을 만들어보자.

간단한 로그인 폼을 만들기 전에 필요한 기능들에 대해서 먼저 정리해보자.

 

1. 폼 작성 필드

사용자의 정보를 입력받을 수 있는 폼 작성 필드를 구현한다. 

 form 태그와 action 속성

 

 

2. 실시간 알림 

사용자가 아이디나 비밀번호를 입력하면 실시간으로 정보를 확인하고

잘못된 입력사항을 공지해준다.

이벤트 헨들러 'iput' 기능
classList 기능 

 

 

3.  정규식

사용자가 입력한 정보가 특정 기준에 부합하는지를 확인한다.

정규식 검사 test 기능

 

 

4. 조건문 

사용자가 입력한 정보가 부합하다면 '통과', 부합하지 않는다면 '실패' 라는 기준을 세워야함. 

조건문(if문 또는 switch문)

 

 

대충 필요한 기능들은 이정도. 

 

 

 

 

 

그럼 먼저 HTML을 활용해서 뼈대부터 세워보자.

<form action="https://www.naver.com" id="login-form">
    <input type="text" id="email" placeholder="이메일 입력">
    
    <span class="alertEmptyEmail warning" id="emptyEmail">이메일을 입력하세요.</span>
    <span class="alertWrongEmail warning" id="wrongEmail">아이디를 이메일 형식으로 입력하세요.</span>



    <input type="password" id="pw" placeholder="비밀번호 입력">
    
    <span class="alertEmptyPassword warning" id="emptyPassword">비밀번호를 입력하세요.</span>
    <span class="alertShortPassword warning" id="shortPassword">비밀번호를 8자 이상 입력하세요.</span>
    <span class="alertWrongPassword warning" id="wrongPassword">비밀번호는 영문 대소문자, 숫자, 특수문자가 포함되어야 합니다.</span>

    <button id="btn">로그인</button>
</form>

 

form 태그와 input 태그를 사용해서 사용자가 정보를 입력할 수 있는 입력 필드 부분을 만들어 줬고

잘못된 입력이 발생할 경우 오류 메세지를 전달하기위해 span 태그를 활용했다. 

(span 태그는 css를 활용해서 display: none 상태이다.)

 

현재 상태에서 로그인 버튼을 클릭하면 form 태그의 action 속성에 적어둔 네이버 메인 페이지로 이동하게 된다. 

 

 

 

 

 

 

 

 

그 다음은 이메일 아이디를 확인할 수 있는 함수 작성 

const email = document.getElementById('email');

function checkId(e){

// 이메일 형식의 정규식
const emailReg = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/;

// 경고 알림 태그
const emptyEmail = document.getElementById('emptyEmail'),
    wrongEmail = document.getElementById('wrongEmail');

// switch문을 활용한 조건문
switch(true){
    case !email.value:
      emptyEmail.classList.add('show-mail-warning')
      e.preventDefault();

      return false;
      

    case !emailReg.test(email.value):
      wrongEmail.classList.add("show-mail-warning")
      e.preventDefault();

      return false;
      

    default:
      emptyEmail.classList.remove('show-mail-warning')
      wrongEmail.classList.remove('show-mail-warning')
      e.preventDefault();

      return true;
      
    }
  }
  
// 사용자가 입력한 정보를 실시간으로 확인하기 위해서 input 이벤트헨들러를 사용  
email.addEventListener('input', checkId)

switch 조건문 안에서 아이디 입력필드가 빈칸이거나 이메일 형식으로 입력되지 않으면 false를 반환한다.

반대로, 입력이 제대로 됐으면 true를 반환한다.

 

 

 

 

그 다음은 비밀번호를 확인할 수 있는 함수 작성

const password = document.getElementById('pw';)

function checkPw(e){
  
  // 비밀번호 형식의 정규식 
  // 최소 8자 이상
  // 하나 이상의 영어 대소문자 포함
  // 하나 이상의 숫자 포함
  // 하나 이상의 특수문자 포함
  const pwReg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[@#$%^&+=]).{8,}$/;

  // 경고 알림 태그
  const emptyPassword = document.getElementById('emptyPassword'),
      shortPassword = document.getElementById('shortPassword'),
      wrongPassword = document.getElementById('wrongPassword')

  // switch문을 활용한 조건문
  switch(true){
    case !password.value:
      emptyPassword.classList.add('show-password-warning')
      e.preventDefault()

      return false

    case password.value.length < 8:
      shortPassword.classList.add('show-password-warning')
      e.preventDefault()

      return false

    case !pwReg.test(password.value):
      wrongPassword.classList.add('show-password-warning')
      e.preventDefault()

      return false

      default:
        emptyPassword.classList.remove('show-password-warning')
        shortPassword.classList.remove('show-password-warning')
        wrongPassword.classList.remove('show-password-warning')

        return true
  }
}
password.addEventListener('input', checkPw)

마찬가지로 switch 조건문을 활용해서 최소 8자 이상, 하나 이상의 영어 대소문자, 숫자, 특수문자가 포함되지 않을 경우 false를 반환하고

위 조건을 모두 만족했을 경우 true를 반환.

 

 

 

 

마지막으로 이 두 개의 함수를 확인하는 헨들러를 만들어 준다.

const loginForm = document.getElementById('login-form');
    
function formCheck(e){
  e.preventDefault()

  if(checkId(e) && checkPw(e)){
    loginForm.submit();
  }
}

loginForm.addEventListener('submit', formCheck);

위 헨들러는 checkId 함수와 checkPw 함수가 모두 true를 반환하게 되면 form 태그 양식 제출을 완료하고 다음 페이지로 넘어 갈 수 있는 조건이다.

반대로 두 개의  함수 중 어느 하나라도 false가 반환된다면 양식 제출을 완료할 수 없다. 

 

 

 

 

최종 완성 구현 

 

이메일을 입력하세요. 아이디를 이메일 형식으로 입력하세요. 비밀번호를 입력하세요. 비밀번호를 8자 이상 입력하세요. 비밀번호는 영문 대소문자, 숫자, 특수문자가 포함되어야 합니다.

 

일단 기능은 성공적으로 작동하지만 코드를 조금 더 줄여보는 노력을 해봐야겠다.