로그인 기능 구현하기

1. 아이디 한글입력 방지

// 아이디 텍스트 박스에 한글 입력 방지

// 입력 방지할 문자열 종류 선택

const korean = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/;

// 입력 요소 선택

const idTbx = document.querySelector('.login-id_Tbx');

idTbx.addEventListener('input', funtion() {

    if (korean.test(idTbx.value)) {

        // 한글을 제거

        idTbx.value = idTbx.value.replace(korean, ' ');

        alert('아이디에는 한글을 입력할 수 없습니다.');

   }

});

 

 

 

2. 비밀번호 암호화

 .클래스명 {

                           -webkit-text-security:disk;

 

 

 

3. 아이디나 비밀번호 둘 중에 하나 틀리거나 모두 입력하지 않았을 경우

// 사용할 변수 선언

const idTbx = document.querySelector('.login-id_Tbx');

const pwTbx = document.querySelector('.login-pw_Tbx');

const lgnBtn = document.querySelector('.login-btn');

lgnBtn.addEventListner('click',

function () {

      // 아이디, 비밀번호 모두 입력되지 않았을 경우

      if (idTbx.value === "" && pwTbx.value === "") {

                          alert('아이디와 비밀번호가 입력되지 않았습니다.");

          // 아이디 혹은 비밀번호가 입력되지 않았을 경우

        } else if (idTbx.value === "" || pwTbx.value === "") {

                         alert('아이디 혹인 비밀번호가 잘못되었습니다.');

        }

});

// ;는 생략 가능