在Jquery上使用Validation弹出登录菜单



我有一个使用引导程序的jquery弹出菜单。它有一些验证问题,比如当密码字段为空或密码错误时,我尝试了几种方法。它有效,但当我在密码或用户名字段中键入内容时,它仍然保持不变这是我的代码

<div class="container">
    <h4>Demo Page</h4>
    <!-- twitter content -->
    <div id="form-content" class="modal hide fade in">
        <a class="close" data-dismiss="modal">×</a>
        <div>
            <form class="contact" action="">
                <div class="modal-body">
                    <ul class="nav nav-list">
                        <li class="nav-header">Username</li>
                        <li>
                            <input class="input-xlarge" type="text" id="txtUsername" name="username">
                        </li>
                        <li class="nav-header">Password</li>
                        <li>
                            <input class="input-xlarge" type="text" id="txtPassword" name="password">
                        </li>
                    </ul>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <%--<input type="button" value="Sign Up" id="btnLogin" />--%>
            <button class="btn btn-success" id="btnLogin">
                Sign Up
            </button>
            <a href="#" class="btn" data-dismiss="modal">Close</a>
        </div>
        <div id="dialog" title="Message">
        </div>
    </div>
</div>

我的js文件有这个函数

function GetUserInfo() {
    var username = document.getElementById('txtUsername').value;
    var password = document.getElementById('txtPassword').value;           
    if (username == "") {
        $('#dialog').text("Please type a username.");
        return false;
    }
    else if (password == "") {
        $('#dialog').text("Please type a password.");
        return false;
    }
    $.ajax({
        url: "webservices/ProdMonitorService.asmx/ValidateUser",
        data: "{'username':'" + username + "','password':'" + password + "'}",
        dataType: "json",
        type: "POST",
        contentType: "application/json; charset=utf-8",
        async: true,
        success: function (data) {
            var obj = jQuery.parseJSON(data.d);
            try {
                if (obj.length == 1) {
                    $("#dialog").dialog("close");
                }
                else {
                    $('#dialog').text(result.d.Message);
                    $("#dialog").dialog("open");
                }
            }
        });
}

当用户名或密码不匹配和/或为空时,我想显示错误消息。我使用这个<div id="dialog" title="Message">来显示基于条件的错误消息。问题是,当你纠正时,错误信息不会消失

如有帮助,不胜感激。。

在GetUserInfo函数的开头使用以下代码。

$('#dialog').text("");
$("#dialog").dialog("close");

为了验证用户名和密码,您可以从服务端实现,并向成功结果返回状态和消息。

希望能有所帮助。

感谢

最新更新