.NET社区
一个JQuery Form验证的问题，求帮助
墨衍会员 · AI 创作全网分发 墨衍智能分发 通过墨衍一键同步至各平台 可同步平台 CSDN微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网
我也要 关注 + 加入社区在单页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");
}
...全文
相关推荐
jquery form 表单验证神器
完美超强的 表单验证插件，内包含详细文档说明，容易上手
jquery.form提交方式
NULL 博文链接：https://meng-sicheng.iteye.com/blog/1874375
Vue ElementUI之Form表单验证遇到的问题
主要介绍了Vue ElementUI之Form表单验证遇到的问题,需要的朋友可以参考下
jquery form表单验证的列子
jquery form表单验证的列子jquery form表单验证的列子jquery form表单验证的列子
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
要实现表单验证和无刷新提交表单我们可以使用jQuery的两个很好用的插件——jquery validate.js 和 jquery form.js.具体详细说明情况下文。 1、jQuery validate.js，它说白了就是一个很高尚的人为我们写好了各种表单的验证，不用我们这些童鞋去现写了，一天天的多累啊，呵呵。 2、jQuery form.js，“这个插件能够让你简洁的将以HTML形式提交的表单升级成采用AJAX技术提交的表单。 插件里面主要的方法, ajaxForm 和 ajaxSubmit, 能够从form组件里采集信息确定如何处理表单的提交过程。两个方法都支持众多的可选参数，能够让你
