asp.net网站的引导验证
本文关键字：验证 net 网站 asp | 更新日期: 2023-09-27 18:17:43
我使用以下来验证表单提交，但代码似乎不能正常工作。怎么了?
当我点击登录按钮，然后显示相应的错误信息，但签名按钮被自动禁用
作为参考，我使用这个链接:http://www.jqueryscript.net/form/powerful形式-验证- plugin - - jquery -引导- 3. - html
My Code:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="login.aspx.cs" Inherits="login" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="UTF-8">
<title>Prajakta Services | Log in</title>
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
<!-- bootstrap 3.0.2 -->
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- font Awesome -->
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<!-- Theme style -->
<link href="css/AdminLTE.css" rel="stylesheet" type="text/css" />
<!-- jQuery 2.0.2 -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" language="javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" language="javascript" src="js/bootstrapValidator.js"></script>
<link href="css/bootstrapValidator.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function() {
$('#form1').bootstrapValidator({
//live: 'disabled',
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
//invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
txt_user_id: {
validators: {
notEmpty: {
message: 'The first name is required and cannot be empty'
}
}
},
txt_password: {
validators: {
notEmpty: {
message: 'The password is required and cannot be empty'
},
different: {
field: 'username',
message: 'The password cannot be the same as username'
}
}
},
}
});
});
</script>
</head>
<body class="bg-black">
<form id="form1" method="post" runat="server">
<div>
<div class="form-box" id="login-box">
<div class="header">Sign In</div>
<asp:Label ID="lbl_msg" runat="server" Text=""></asp:Label>
<div class="body bg-gray">
<div class="form-group">
<asp:TextBox ID="txt_user_id" name="userid" runat="server" class="form-control" placeholder="User ID"></asp:TextBox>
</div>
<div class="form-group">
<asp:TextBox ID="txt_password" runat="server" name="pass" class="form-control" placeholder="Password" TextMode="Password"></asp:TextBox>
</div>
</div>
<div class="footer">
<asp:Button ID="btn_login" runat="server" Text="Login"
class="btn bg-olive btn-sm" onclick="btn_login_Click"/>
<asp:Button ID="btn_cancel" runat="server" Text="Cancel"
class="btn bg-olive btn-sm"/>
<p><a href="#">I forgot my password</a><br />
<a href="register.aspx">Sign Up</a></p>
</div>
</div>
</div>
<br />
</form>
</body>
</html>
请您建议我的代码中需要更正的地方，并提前感谢您的建议
第一个观察是，这里看起来你有一个打字错误:
$('#from1').validate
应该是:
$('#form1').validate
我解决了这个问题，这里是未来参考的解决方案，我将java脚本代码放在头部部分之前，我包括所有所需的js文件
<head>
<script type="text/javascript">
$(document).ready(function() {
$('#form1').bootstrapValidator({
feedbackIcons: {
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh'
},
fields: {
// There is no single quote
userid: {
validators: {
notEmpty: {
message: 'The username is required and cannot be empty'
},
stringLength: {
min: 6,
max: 30,
message: 'The username must be more than 6 and less than 30 characters long'
},
regexp: {
regexp: /^[a-zA-Z0-9]+$/,
message: 'The username can only consist of alphabetical and number'
},
different: {
field: 'password',
message: 'The username and password cannot be the same as each other'
}
}
},
pass: {
validators: {
notEmpty: {
message: 'The password is required and cannot be empty'
},
}
}
}
});
});
</script>
</head>
<body>
<form id="form1" method="post" runat="server">
<div>
<div class="form-box" id="login-box">
<div class="header">Sign In</div>
<asp:Label ID="lbl_msg" runat="server" Text=""></asp:Label>
<div class="body bg-gray">
<div class="form-group">
<asp:TextBox ID="txt_user_id" runat="server" class="form-control" placeholder="User ID" name="userid"
required data-bv-notempty-message="The User ID is required and cannot be empty"></asp:TextBox>
</div>
<div class="form-group">
<asp:TextBox ID="txt_password" runat="server" class="form-control" placeholder="Password" TextMode="Password" name="pass"
required data-bv-notempty-message="The password is required and cannot be empty"></asp:TextBox>
</div>
</div>
<div class="footer">
<asp:Button ID="btn_login" runat="server" Text="Login"
class="btn bg-olive btn-sm" onclick="btn_login_Click"/>
<asp:Button ID="btn_cancel" runat="server" Text="Cancel"
class="btn bg-olive btn-sm" OnClientClick="resetFields(form1);"/>
<p><a href="#">I forgot my password</a><br />
<a href="register.aspx">Sign Up</a></p>
</div>
</div>
</div>
<br />
</form>
</body>
感谢您的精彩回复，谢谢。