[JAVA 개발] jquery(제이쿼리) keyup / text / html 이용한 회원가입 비밀번호 확인 체크폼

여러 사이트에서 회원가입을 하다 보면 비밀번호 기재란이 있고, 그 아래 비밀번호 확인란이 있습니다.

비밀번호와 확인란 모두 동일해야 가입이 정상적으로 진행되는데요.

오늘은 비밀번호와 비밀번호 확인란을 비교하여 동일한지 체크해 보여주는 소스를 작성하도록 하겠습니다.

스크립트소스

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
 $(function(){
  $('#user_pass').keyup(function(){
   $('font[name=check]').text('');
  }); //#user_pass.keyup

  $('#chpass').keyup(function(){
   if($('#user_pass').val()!=$('#chpass').val()){
    $('font[name=check]').text('');
    $('font[name=check]').html("암호틀림");
   }else{
    $('font[name=check]').text('');
    $('font[name=check]').html("암호맞음");
   }
  }); //#chpass.keyup
 });
</script>

JSP 소스

<table>
  <tr>
   <td>비밀번호</td>
   <td><input type="password" name="user_pass" id="user_pass" size="10" /></td>
  </tr>
  <tr>
   <td>비밀번호확인</td>
   <td>
    <input type="password" name="chpass" id="chpass" size="10" />
    <font name="check" size="2" color="red"></font> 
   </td>
  </tr>
 </table> 

실행화면을 보시게 되면, 임의로 type를 text로 변경해서 보여드리겠습니다.

동일한 값을 주게되면 font태그에 암호맞음이 나타나게되며, 다른값을 주게되면 암호틀림이 나타나게 됩니다. 

소스는 간단한 샘플 소스이기때문에 쉽게 확인하실수 있습니다.

감사합니다.