我正在使用ASP.NET和jquery。我正在使用jquery进行验证。
在验证失败时我想停止回发,但我无法做到。
代码如下所述:
的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;
}
答案 0 :(得分: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
}
})
答案 1 :(得分: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的上下文中表现不同,因为在纯JavaScript中return false;
不会阻止事件冒泡DOM,但会取消默认操作。< / p>
答案 2 :(得分:0)
在验证失败时在javascript中添加return false;
语句,它将阻止回发。 e.g。
if ($('input[name$=UserName]').val() == '') {
$('input[name$=UserName]').addClass('error-style');
return false;
}