在驗證faliure停止回發

我使用jQuery的ASP.NET。我正在使用jquery進行驗證。在驗證faliure停止回發

驗證失敗時，我想停止回發，但我無法執行此操作。

代碼是如下所述：

的Login.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>

的style.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; 
}

來源

2013-06-29 Priyank Thakkar

首先，我建議你使用提交事件，因爲這是你在做什麼試圖處理。

$('#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-29 14:43:03

謝謝。：）有效 –

在您的語句中添加return false;當驗證失敗時，javascript會阻止回發。例如

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

來源

2013-06-29 14:44:59

鑑於你的代碼：

$('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的上下文中，因爲在普通的JavaScript return false;不會停止冒泡DOM的事件，但會取消默認操作。

來源

2013-06-29 14:54:50

在驗證faliure停止回發

回答

相關問題