25.jQuery - IF문 ( 02.Selectors - 03.PasswordConfirm )
| 03.PasswordConfirm.htm |
|
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<title>암호확인 기능 구현하기</title>
<script src="../jQuery/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{ //[1]
lblError 레이어 클리어 $('#txtPassword').keyup(function() { //$('#lblError').remove();
// 제거 $('#lblError').text(''); // 제거가 아니라 클리어 }); //[2] 암호 확인 기능 구현 $('#txtPasswordConfirm').keyup(function() { if
($('#txtPassword').val()
!= $('#txtPasswordConfirm').val())
{ $('#lblError').text('');
// 클리어 $('#lblError').html("<b>암호가 틀립니다.</b>");
//레이어에 HTML 출력 } else
{ $('#lblError').text('');
// 클리어 $('#lblError').html("<b>암호가 맞습니다.</b>"); } });
});
</script> </head> <body>
<table style="border: 1px solid skyblue;">
<tr> <td>암호 : </td> <td><input type="password" id="txtPassword" size="20" /></td>
</tr>
<tr> <td>암호확인 :</td> <td><input type="password" id="txtPasswordConfirm" size="20" /></td>
</tr>
</table>
<div id="lblError">암호를 입력하시오.</div>
</body> </html> |
| 결과화면 |
[그림25-1] |
03.PasswordConfirm.htm