JS - id, pwd 유효성 검사 복습하다가 안됐던거.

      const id = document.getElementById('id').value;
      const pwd = document.getElementById('pwd').value;

      $('form').on('submit', function(e){
        if(id == ""){
          alert('아이디를 입력해주세요.');
          return false;
        } 
        if(pwd == "") {
          alert('비밀번호를 입력해주세요.');
          return false;
        }
        if(pwd.length <= 6) {
          alert('비밀번호가 6글자 이하입니다.');
          return false;
        }
        $('form').submit();
      });

id, pwd 변수에 value값을 처음부터 담아서 검증하고 싶었는데 실행이 생각대로 안됐다.

대체 이유가 뭐지~ 하면서 let으로도 바꿔보고 var로도 바꿔보는 삽질 시작했지만

결국  변수 실행 순서 과정에서 나는 오류였다.

 

Q. 자주 물을 것 같은 질문

var 유저답안 = document.querySelector('#answer').value;

이걸 이벤트리스너 바깥에 넣으면 왜 안되나요?

 

A. 변수를 언제 만들지 잘 결정해야합니다.

<script>안에 그냥 있는 코드는 새로고침시 1회 실행됩니다.

이벤트리스너 안에 있는 코드는 이벤트 발동시 1회 실행됩니다. 

 

      const id = document.getElementById('id');
      const pwd = document.getElementById('pwd');

      $('form').on('submit', function(e){
        if(id.value == ""){
          alert('아이디를 입력해주세요.');
          return false;
        } 
        if(pwd.value == "") {
          alert('비밀번호를 입력해주세요.');
          return false;
        }
        if(pwd.value.length <= 6) {
          alert('비밀번호가 6글자 이하입니다.');
          return false;
        }
        $('form').submit();
      });

요소만 변수 선언하고 이벤트리스너에서 value값으로 접근하면 잘 동작한다.

 

참고:  https://tecoble.techcourse.co.kr/post/2021-04-25-hoisting/