62,046
社区成员
发帖
与我相关
我的任务
分享一个JQuery Form验证的问题，求帮助
在单页Asp.net页面中试验JQuery Form验证，没问题，但是用到我项目中（带母版页）就一直没效果，找了半天也不知道什么 原因，求高手解答。直接上代码。
aspx代码，为了简单，就不发母版页了。
由于有母版页，所以在客户端生成的ID都自带“MainContent”前缀
aspx代码，为了简单，就不发母版页了。
<%@ Page Title="玩家注册" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Register.aspx.cs" Inherits="SuperMinersWeb.Register" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script src="Scripts/jquery-3.0.0.js"></script>
<script src="Scripts/jquery.validate.min.js"></script>
<script src="Scripts/Default.js"></script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
<div class="registerpage">
<table>
<tbody>
<tr>
<th>
<label for="txtUserName"><span>*</span>用户名： </label>
</th>
<td class="inputcol">
<asp:TextBox ID="txtUserName" runat="server" MaxLength="15" CssClass="textbox" ToolTip="请输入用户名！" TabIndex="1" />
</td>
<td>
<span id="msgUserName" class="message"></span>
<img id="imgUserNameOK" src="Images/yes.png" class="message" style="display:none"/>
</td>
</tr>
<tr>
<th>
<label for="txtNickName">昵称： </label>
</th>
<td class="inputcol">
<asp:TextBox ID="txtNickName" runat="server" MaxLength="15" CssClass="textbox" ToolTip="请输入昵称！" TabIndex="2" />
</td>
<td>
<span></span>
</td>
</tr>
<tr>
<th>
<label for="txtPassword"><span>*</span>密码： </label>
</th>
<td>
<asp:TextBox ID="txtPassword" runat="server" TextMode="Password" CssClass="textbox" MaxLength="15" ToolTip="请输入密码！" TabIndex="3" />
</td>
<td>
<span id="msgPassword" class="message"></span>
<img id="imgPasswordOK" src="Images/yes.png" class="message" style="display:none"/>
</td>
</tr>
<tr>
<th>
<label for="txtConfirmPassword"><span>*</span>确认密码： </label>
</th>
<td>
<asp:TextBox ID="txtConfirmPassword" runat="server" TextMode="Password" CssClass="textbox" MaxLength="15" ToolTip="请再次输入密码！" TabIndex="4" />
</td>
<td>
<span id="msgConfirmPassword" class="message"></span>
<img id="imgConfirmPasswordOK" src="Images/yes.png" class="message" style="display:none"/>
</td>
</tr>
<tr>
<th>
<label for="txtEmail"><span>*</span>邮箱： </label>
</th>
<td>
<asp:TextBox ID="txtEmail" runat="server" MaxLength="20" CssClass="textbox" ToolTip="请输入邮箱！" TabIndex="5" />
</td>
<td>
<span id="msgEmail" class="message"></span>
<img id="imgEmailOK" src="Images/yes.png" class="message" style="display:none"/>
</td>
</tr>
<tr>
<th>
<label for="txtQQ">QQ： </label>
</th>
<td>
<asp:TextBox ID="txtQQ" runat="server" MaxLength="15" CssClass="textbox" TabIndex="6" />
</td>
<td>
<span id="msgQQ" class="message"></span>
<img id="imgQQOK" src="Images/yes.png" class="message" style="display:none"/>
</td>
</tr>
<tr>
<th>
<label for="txtAuthCode"><span>*</span>验证码： </label>
</th>
<td>
<asp:TextBox ID="txtAuthCode" runat="server" MaxLength="15" CssClass="textbox" ToolTip="请输入验证码！" TabIndex="7" />
</td>
<td>
<span id="msgAuthCode" class="message"></span>
<img id="imgAuthCodeOK" src="Images/yes.png" class="message" style="display:none"/>
</td>
</tr>
<tr>
<th>
</th>
<td>
请输入此验证码
<img id="imgAuthCode" src="AuthCode" class="checkimg" alt="验证码" />
<a href="javascript:CallServerForUpdate()" class="checkimg">换下一张</a>
</td>
<td>
</td>
</tr>
</tbody>
</table>
<asp:Button ID="btnRegister" CssClass="button" runat="server" Text="注 册" OnClick="btnRegister_Click" TabIndex="8" />
</div>
</asp:Content>
由于有母版页，所以在客户端生成的ID都自带“MainContent”前缀
$().ready(function () {
try{
$("#form1").validate({
rules: {
MainContent_txtUserName: {
required: true,
minlength: 3,
maxlength: 15
},
MainContent_txtNickName: {
maxlength: 15
},
MainContent_txtPassword: {
required: true,
minlength: 6,
maxlength: 15
},
MainContent_txtConfirmPassword: {
required: true,
minlength: 6,
maxlength: 15,
equalTo: MainContent_txtPassword
},
MainContent_txtEmail: {
required: true,
maxlength: 20
}
},
messages: {
MainContent_txtUserName: {
required: "请输入用户名",
minlength: "用户名最少3个字符",
maxlength: "用户名最多15个字符"
},
MainContent_txtNickName: {
maxlength: "昵称最多15个字符"
},
MainContent_txtPassword: {
required: "请输入密码",
minlength: "密码最少6位",
maxlength: "密码最多15位"
},
MainContent_txtConfirmPassword: {
required: "请再次输入密码",
minlength: "密码最少6位",
maxlength: "密码最多15位",
equalTo: "两次密码不一至，请重新输入"
},
MainContent_txtEmail: {
required: "请输入电子邮箱",
maxlength: "您输入的电子邮箱过长"
}
}
})
} catch (err) {
alert(err);
}
$("#MainContent_txtPassword").blur(CheckPassword);
});
function CheckPassword() {
$("#msgPassword").text("");
$("#imgPasswordOK").css("display", "none");
var pwd = $("#MainContent_txtPassword").val();
if (pwd.length < 6) {
$("#msgPassword").text("密码至少6个字符");
return;
}
$("#imgPasswordOK").css("display", "inline");
}
...全文
请发表友善的回复…
发表回复
HeavensDoor 2016-07-04
- 打赏
- 举报
就没有懂的吗？
lovebaby 2016-06-30
- 打赏
- 举报
你发服务器端代码还不如直接发解析出来的HTML代码，jquery验证是客户端的事。
大雨将至 2016-06-30
- 打赏
- 举报
你可以把写死的控件名改成 <%=txtUserName.ClientID%> 这样试试
HeavensDoor 2016-06-30
- 打赏
- 举报
为什么没人回呢
，在线苦等
，在线苦等HeavensDoor 2016-06-29
- 打赏
- 举报
没人回呢，自己再顶！
HeavensDoor 2016-06-28
- 打赏
- 举报
自己顶顶顶顶
