Blog Content

    티스토리 뷰

    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]



    반응형

    Comments