event listener사용해서 로그인창 구현해보기

 

    <script>
      //재료준비
      const loginBtn = document.querySelector('#login');
      const modal = document.querySelector('#modal');
      const closeBtn = document.querySelector('#close');
      const inputID = document.querySelector('#id');
      const inputPWD = document.querySelector('#pwd');
      const sendBtn = document.querySelector('#send');
      const mandatory = document.querySelector('.mandatory');
      const required = '@';

      //로그인버튼 클릭시 모달창 add/remove
      loginBtn.addEventListener('click', function () {
        modal.classList.add('show-modal');
      });

      closeBtn.addEventListener('click', function () {
        modal.classList.remove('show-modal');
      });

      // 아이디 값이 없을 시, 아이디에 @가 불포함일시 경고창 띄우기
      send.addEventListener('click', function () {
        if (inputID.value == '') {
          event.preventDefault();
          alert('뭐라도 써서 내세요');
        } else if (inputID.value.includes(required) == false) {
          event.preventDefault();
          alert('이메일 형식으로 쓰세요');
        }
      });

        //패스워드가 6자리 미만 혹은 12자리 이상일 시 안내문구 띄우기
      inputPWD.addEventListener('input', function () {
        if (inputPWD.value.length < 6 || inputPWD.value.length > 12) {
          mandatory.classList.add('show-mandatory');
        } else {
          mandatory.classList.remove('show-mandatory');
        }
      });
    </script>

 

• 자바스크립트만 집중적으로 연습해보고 싶을 때에는 부트스트랩같은 라이브러리를 적극적으로 사용해야겠다. HTML과 CSS에 소모되는 시간을 없애준다.
• 다음에는 좀 더 복잡한 유효성 검사식을 추가해봐야지.