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

あなたのコードを考えると：

$('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;両方を実行します。

をいつ、どこで使用するか、または使用しないかについて詳しく知りたい場合は、 jQuery Events - Stop (Mis)Using return false をreturn false;読むことをお勧めします。

注: return false;jQuery とプレーンな JavaScript のコンテキスト内では動作が異なります。プレーンな JavaScriptreturn false;では、イベントが DOM をバブリングするのを止めませんが、デフォルトのアクションをキャンセルします。

于 2013-06-29T14:54:50.217 に答える