Jquery.Validate是一个相当棒的客户端验证控件，它的功能强大就不必说了，本文主要介绍了它对asp.net中三类控件CheckBoxList,RadioButtonList,DropDownList是否选中的验证，当然，服务器的验证也是必须的。
建立一个项目，结构如图：
主要js如下：
<script type="text/javascript">
//DropDownList验证方法
$.validator.addMethod('selectNone',
function(value, element) {
return this.optional(element) ||(value!= -1);
}, "请选择至少一项！");
//ChekcBoxList验证方法
/*
$.validator.addMethod('atLeastOneChecked', function(value, element) {
var checkedCount = 0;
$("input[name^='" + <%=txtHistory.UniqueID %> + "']").each(function() {
if ($(this).attr('checked')) { checkedCount++; }
});
return checkedCount>0;
},"请选择至少一项");
*/
// 手机号码验证
$.validator.addMethod("isMobile", function(value, element) {
var length = value.length;
var mobile = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
return this.optional(element) || (length == 11 && mobile.test(value));
}, "请正确填写您的手机号码");
$(document).ready(function () {
//验证CheckBoxList
ValidateOptions = function(sender, args) {
args.IsValid=false;
var len = $("#history_DIV input:checked").length;
args.IsValid = (len>0);
};
$("#form1").validate(
{
rules: {
<%=txtVName.UniqueID %>: {
required: true
},
<%=txtEmail.UniqueID %>: {
required: true,
email:true
},
<%=txtRemark.UniqueID %>: {
required: true
},
<%=txtVSex.UniqueID %>: {
required: function(element) {
return $("input:radio[name='txtVSex']:checked").val()!="";
}
},
<%=txtFrom.UniqueID %>:{
selectNone: true
},
<%=txtMobile.UniqueID %>:{
required:true,
isMobile:true
},
<%=txtHistory.UniqueID %>:{
//required: function(element) {
//return ($("#history_DIV input:checked").length)>0;}
//return $("#<%=txtHistory.UniqueID %> input[@type=checkbox]:checked").size()>0;
// return $("input[name^='<%=txtHistory.UniqueID %>']").length>0
//atLeastOneChecked: true
}
},
messages: {
<%=txtRemark.UniqueID %>:
{
required: "请填写报名理由"
},
<%=txtVSex.UniqueID %>:
{
required: "请选择性别"
},
<%=txtMobile.UniqueID %>:{
required: "请填写手机号码"
},
<%=txtHistory.UniqueID %>:{
required: "请选择届数"
}
}
});
});
</script>
前台页面如下：
<table width="750" border="0" cellpadding="0" cellspacing="5">
<tr>
<td width="150" height="40">
真实姓名：
</td>
<td width="600">
<asp:TextBox ID="txtVName" runat="Server" Width="280px" />
</td>
</tr>
<tr>
<td height="40">
性别：
</td>
<td>
<asp:RadioButtonList ID="txtVSex" runat="server" RepeatDirection="Horizontal">
<asp:ListItem Text="男" Value="男"></asp:ListItem>
<asp:ListItem Text="女" Value="女"></asp:ListItem>
</asp:RadioButtonList>
<br />
</td>
</tr>
<tr>
<td height="40">
手机号码：<br />
</td>
<td>
<asp:TextBox ID="txtMobile" runat="Server" Width="280px" />
<span>请填写真实手机号码方便接收活动通知</span>
</td>
</tr>
<tr>
<td height="40">
E-Mail：<br />
</td>
<td>
<asp:TextBox ID="txtEmail" runat="Server" Width="280px" CssClass="email" />
<span>用于接收邮件通知</span>
</td>
</tr>
<tr>
<td height="40">
职业：<br />
</td>
<td>
<asp:RadioButtonList ID="txtC_Name" runat="server" RepeatDirection="Horizontal">
<asp:ListItem Text="学生" Value="1"></asp:ListItem>
<asp:ListItem Text="职员" Value="2"></asp:ListItem>
<asp:ListItem Text="经理" Value="3"></asp:ListItem>
<asp:ListItem Text="家庭主妇" Value="4"></asp:ListItem>
<asp:ListItem Text="自由职业者" Value="5"></asp:ListItem>
</asp:RadioButtonList>
</td>
</tr>
<tr>
<td height="40">
报名人数：<br />
</td>
<td>
<asp:RadioButtonList ID="txtC_EName" runat="server" RepeatDirection="Horizontal">
<asp:ListItem Text="就我一人" Value="1"></asp:ListItem>
<asp:ListItem Text="两人" Value="2"></asp:ListItem>
<asp:ListItem Text="三人" Value="3"></asp:ListItem>
</asp:RadioButtonList>
</td>
</tr>
<tr>
<td height="40">
报名理由:
</td>
<td>
<asp:TextBox TextMode="MultiLine" Columns="50" Rows="5" ID="txtRemark" runat="Server" />
<br />
<span>优质理由怎么写？1.描述您为什么要申请2.描述活动那里吸引您 3.个性化自由发挥</span>
</td>
</tr>
<tr>
<td height="40">
参加过的：<br />
</td>
<td>
<table>
<tr>
<td>
<div id="history_DIV">
<asp:CheckBoxList ID="txtHistory" runat="server" RepeatDirection="Horizontal">
<asp:ListItem Text="无" Value="0">
</asp:ListItem>
<asp:ListItem Text="第一届" Value="1">
</asp:ListItem>
<asp:ListItem Text="第二届" Value="2">
</asp:ListItem>
<asp:ListItem Text="第三届" Value="3">
</asp:ListItem>
</asp:CheckBoxList>
</div>
</td>
<td>
<asp:CustomValidator ID="customCheckBoxListValidator" runat="server" ErrorMessage="至少选择一项"
ClientValidationFunction="ValidateOptions" Display="Dynamic" ForeColor="Red"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="40">
了解活动：<br />
</td>
<td>
您从以下渠道得知本活动？
<asp:DropDownList ID="txtFrom" runat="server">
<asp:ListItem Text="请选择" Value="-1" Selected="True">
</asp:ListItem>
<asp:ListItem Text="搜索引擎" Value="1">
</asp:ListItem>
<asp:ListItem Text="朋友介绍" Value="2">
</asp:ListItem>
<asp:ListItem Text="平面媒介" Value="3">
</asp:ListItem>
<asp:ListItem Text="网站新闻" Value="4">
</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td height="60" colspan="2" align="center" valign="bottom">
<asp:Button ID="btnInsert" Text="确认报名" runat="server" />
</td>
</tr>
</table>
效果如图：
源码下载1
源码下载2
分享到：
相关推荐
jquery.validate.1.9.0.min.js jquery.validate.1.12.0.min.js jquery.validate.1.13.1.min.js jquery.validate.1.16.0.min.js jquery.validate.1.14.0.min.js jquery.validate.1.15.1.min.js jquery.validate....
总的来说，jQuery.validate是JavaScript开发中不可或缺的工具，它简化了表单验证的过程，提高了代码的可读性和维护性。通过深入理解和灵活运用，开发者可以创建出高效且用户友好的表单验证机制。
jquery.validate.js jquery.validate.js
jquery.validate.min.js jquery jquery验证插件 validate
从给定的文件信息来看，文件主要介绍了jquery.validate.js的表单验证功能。jquery.validate.js是一个强大的jQuery插件，可以帮助开发者快速实现表单验证。以下是该文件中提及的关键知识点： 1. jquery.validate.js...
jquery.validate.jsjquery.validate.jsjquery.validate.jsjquery.validate.jsjquery.validate.jsjquery.validate.jsjquery.validate.jsjquery.validate.jsjquery.validate.jsjquery.validate.jsjquery.validate.js...
微软的jquery.validate.unobtrusive.js验证插件,可以用来验证单选和多选框的.
jQuery.validate插件是一个强大的、易于使用的JavaScript库，它使得在jQuery环境下进行表单验证变得简单而高效。本文将深入探讨jQuery.validate的使用方法以及源码解析，帮助开发者更好地理解和运用这一工具。 首先...
《jQuery.validate.js：高效前端表单验证的利器》 在Web开发中，用户输入的数据验证是必不可少的一环，确保数据的正确性和完整性是系统稳定运行的关键。jQuery.validate.js是一款强大的JavaScript插件，专为jQuery...
jquery.validate.extend.js
jquery.validate插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来...
2. **初始化验证**：使用`jQuery`选择器找到需要验证的表单元素，并调用`.validate()`方法，配置相应的验证规则。例如，对于密码字段，可能有`required`（必填）、`minlength`（最小长度）和自定义的正则表达式规则...
jquery.validate.js表单验证 jquery.validate.messages_cn.js 表单验证中文提示
《jQuery.validate.js表单验证及API详解》 在Web开发中，表单验证是不可或缺的一环，它确保用户输入的数据符合预设的规则，从而保证数据的准确性和安全性。jQuery库提供了一个强大的插件——jQuery.validate.js，...
jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。