jQuery實現簡單登陸判斷

商炳奇發表於2013-04-19
jQuery

<script src="jquery-1.9.1.js"></script>
    <script type="text/javascript">

            $('#txtUserName').focus(function () {
                $('#txtUserName').val('');
            })

            $('#txtPassWord').focus(function () {
                $('#txtPassWord').val('');
            })

            $('#txtUserName').blur(function () {
                if ($('#txtUserName').val() =='')
                {
                    $('#txtUserName').val('使用者名稱不能為空');
                    //重新獲得焦點
                  //  $('#txtUserName').focus();
                }
            })
            $('#txtPassWord').blur(function () {
                if ($('#txtPassWord').val() == '') {
                    $('#txtPassWord').val('密碼不能為空');
                }
            })
            $('#btnSubmit').click(function () {
                if ($('#txtUserName').val() == 'admin' && $('#txtPassWord').val() == '888888')
                { alert('登陸成功！'); }
                else { alert('登陸失敗！'); }
            })
        })
    </script>
</head>
<body>

    使用者名稱：<input id="txtUserName" type="text" value="請輸入使用者名稱" /><br />
    密 碼：<input id="txtPassWord" type="text" value="請輸入密碼" /><br />
    <input id="btnSubmit" type="button" value="btnSubmit" />
</body>

相關文章