자바스크립트 기초- 비밀번호 일치 확인 및 글자수세기

회원가입 시 비밀번호를 2번 입력받을 경우 백엔드로 넘기기 전에 처리하는 방법

 

<form name="join">
    비밀번호 : <input type="password" id="password1">
    비밀번호확인 : <input type="password" id="password2">
    <input type="button" onclick="test()" value="회원가입">
  </form>

결과물은 아래와 같다.

여기에서 회원가입 버튼을 눌렀을때 비밀번호와 비밀번호확인 값이 일치하여야한다. 백엔드에서 검사를 하는 방법도 있지만 비효율적이기에 일치여부를 확인한 후 전송한다.

 

  <script type="text/javascript">
    function test() {
      var p1 = document.getElementById('password1').value;
      var p2 = document.getElementById('password2').value;
      if( p1 != p2 ) {
        alert("비밀번호가 일치 하지 않습니다");
        return false;
      } else{
        alert("비밀번호가 일치합니다");
        return true;
      }

    }
  </script>

 

 

글자수세기

비밀번호를 6글자 이상으로 세팅하고 싶다면 하나의 if문을 추가하면 된다.

  if(p1.length < 6) {
              alert('입력한 글자가 6글자 이상이어야 합니다.');
              return false;
          }

 

전체소스

  <form name="join">
    비밀번호 : <input type="password" id="password1">
    비밀번호확인 : <input type="password" id="password2">
    <input type="button" onclick="test()" value="회원가입">
  </form>

  <script type="text/javascript">
    function test() {
      var p1 = document.getElementById('password1').value;
      var p2 = document.getElementById('password2').value;
      
      if(p1.length < 6) {
              alert('입력한 글자가 6글자 이상이어야 합니다.');
              return false;
          }
          
          if( p1 != p2 ) {
            alert("비밀번호불일치");
            return false;
          } else{
            alert("비밀번호가 일치합니다");
            return true;
          }
    }
  </script>