0

我正在使用带有 jquery 的 ASP.NET。我正在使用 jquery 进行验证。

在验证失败时，我想停止回发，但我无法做到。

代码如下所述：

登录.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="WebApplication1.Login" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('input[name$=UserName]').data("state", "U");
            $('input[name$=Password]').data("state", "U");

            $('input[name$=btnLogin]').mouseenter(function () {
                $('input[name$=btnLogin]').addClass('login-button-hover');
            });

            $('input[name$=btnLogin]').mouseleave(function () {
                $('input[name$=btnLogin]').removeClass('login-button-hover');
            });

            $('input[name$=UserName]').val('Username');
            $('input[name$=UserName]').addClass('username-password-textbox-load');
            $('input[name$=UserName]').focusin(function () {
                $('input[name$=UserName]').data("state", "C");
                $('input[name$=UserName]').val('');
                $('input[name$=UserName]').addClass('username-password-textbox-focus');
                $('input[name$=UserName]').removeClass('username-password-textbox-load');
            });

            $('input[name$=UserName]').focusout(function () {
                $('input[name$=UserName]').removeClass('username-password-textbox-focus');
            });

            $('input[name$=Password]').val('Password');
            $('input[name$=Password]').addClass('username-password-textbox-load');
            $('input[name$=Password]').focusin(function () {
                $('input[name$=Password]').data("state", "C");
                $('input[name$=Password]').val('');
                $('input[name$=Password]').removeClass('username-password-textbox-load');
                $('input[name$=Password]').addClass('username-password-textbox-focus');
            });

            $('input[name$=Password]').focusout(function () {
                $('input[name$=Password]').removeClass('username-password-textbox-focus');

            });           

            $('input[name$=btnLogin]').click(function (evt) {
                var uState = $('input[name$=UserName]').data("state");
                var pState = $('input[name$=Password]').data("state");

                if ($('input[name$=UserName]').val() == '') {
                    $('input[name$=UserName]').addClass('error-style');
                }
            });



        });
    </script>
</head>
<body>
    <form id="loginForm" runat="server">
        <div class="login-div">
            <asp:Login runat="server" OnAuthenticate="Unnamed_Authenticate">
                <LayoutTemplate>
                    <table>
                        <tr>
                            <td valign="middle">
                                <div align="left">
                                    <label class="login-header-text">Sign In</label>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td valign="middle">
                                <div align="left">
                                    <label class="login-header-text username-password-text">Username</label><br />
                                    <asp:TextBox runat="server" ID="UserName" CssClass="username-password-textbox" />
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td valign="middle">
                                <div align="left">
                                    <label class="login-header-text username-password-text">Password</label><br />
                                    <asp:TextBox runat="server" ID="Password" TextMode="Password" CssClass="username-password-textbox" />
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td valign="middle">
                                <div align="left" style="margin-top: 5px;">
                                    <asp:CheckBox runat="server" ID="chkbxRemember" Text="Stay signed in" CssClass="login-header-text remember-user-text" />
                                    <asp:Button runat="server" ID="btnLogin" Text="Login" CssClass="login-button" />
                                </div>
                            </td>
                        </tr>
                    </table>
                </LayoutTemplate>
            </asp:Login>
        </div>
    </form>
</body>
</html>

样式.css

html
{
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
}

body
{
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
}

div
{
    margin: 0px;
    padding: 0px;
}

table
{
    margin: 0px;
    padding: 0px;
    border: none;
    border-collapse: collapse;
}

.login-div
{
    border: 2px solid #89a2a6;
    background-color: #ccf1fa;
    padding: 15px;
    width: 260px;
}

.login-header-text
{
    font-family: Calibri;
    font-weight: normal;
    font-size: 16pt;
    color: #89a2a6;
}

.username-password-text
{
    font-weight: bold;
    font-size: 12pt;
}

.username-password-textbox
{
    width: 250px;
    height: 25px;
    border: 1px solid #89a2a6;
}

.username-password-textbox-focus
{
    border-color: #5bd0f1;
}

.username-password-textbox-load
{
    color: #89a2a6;
}

.remember-user-text
{
    font-size: 12pt;
}

.login-button
{
    border: none;
    text-align: center;
    background-color: #5bd0f1;
    font-family: Calibri;
    font-weight: normal;
    font-size: 12pt;
    color: #FFFFFF;
    height: 25px;
    width: 70px;
    margin-left: 68px;
}

.login-button-hover
{
    background-color: #1ac1eb;
    cursor: pointer;
}

.error-style
{
    border: 1px solid red;
    background-color: red;
}
4

3 回答 3

1

首先，我建议您使用提交事件，因为这是您要处理的。

$('#loginForm').submit(function() {
    var uState = $('input[name$=UserName]').data("state");
    var pState = $('input[name$=Password]').data("state");

    if ($('input[name$=UserName]').val() == '') {
        $('input[name$=UserName]').addClass('error-style');
        return false; // <-- if not valid, cancel submit
    }
})
于 2013-06-29T14:43:03.873 回答
1

鉴于您的代码：

$('input[name$=btnLogin]').click(function (evt) {
    var uState = $('input[name$=UserName]').data("state");
    var pState = $('input[name$=Password]').data("state");

    if ($('input[name$=UserName]').val() == '') {
        $('input[name$=UserName]').addClass('error-style');
    }
});

对于如何处理您的情况，您有几种选择：evt.preventDefault(),evt.stopPropogation()或return false;; 您可以直接在addClass('error-style');.

值得注意的是这些方法之间的差异，即evt.preventDefault()只是停止浏览器将采取的默认操作（即在您的按钮的情况下回发，但它也可以阻止浏览器导航到href例如锚点） ; evt.stopPropogation()实际上阻​​止了事件使 DOM 冒泡，最后，return false;两者都做。

如果您有兴趣了解有关何时何地使用或不使用的更多信息return false;，那么我建议您阅读jQuery Events - Stop (Mis)Using return false

注意：return false;在 jQuery 和纯 JavaScript 的上下文中行为不同，因为纯 JavaScriptreturn false;不会阻止事件冒泡 DOM，但会取消默认操作。

于 2013-06-29T14:54:50.217 回答
0

当验证失败时在你的javascript中添加return false;语句，它将阻止回发。例如

if ($('input[name$=UserName]').val() == '') {
     $('input[name$=UserName]').addClass('error-style');
     return false;
}
于 2013-06-29T14:44:59.317 回答