ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList

首先看下界面代码:


代码如下:

<form id="form1" runat="server">
<div align="center">
<fieldset style="width: 350px; height: 200px;">
<table border="0" cellpadding="3" cellspacing="3">
<tr>
<td>
请选择汽车类型:
</td>
</tr>
<tr>
<td>
<asp:CheckBoxList ID="chkCar" runat="server">
<asp:ListItem Value="1" Text="奔驰汽车"></asp:ListItem>
<asp:ListItem Value="2" Text="宝马汽车"></asp:ListItem>
<asp:ListItem Value="3" Text="奥迪汽车"></asp:ListItem>
<asp:ListItem Value="4" Text="现代汽车"></asp:ListItem>
<asp:ListItem Value="5" Text="丰田汽车"></asp:ListItem>
</asp:CheckBoxList>
</td>
</tr>
<tr>
<td>
<asp:Button ID="btnSubmit" runat="server" Text="提交" />
</td>
</tr>
</table>
</fieldset>
<asp:CustomValidator ID="ctvCar" runat="server" Display="Dynamic" ErrorMessage="至少选择三种车!"
ForeColor="Red" ClientValidationFunction="ctvCar_Validation"></asp:CustomValidator>
</div>
</form>

控件CustomValidator相关参数说明:
ErrorMessage:设置校验提示信息
Display:设置显示模式,Dynamic表示提示信息不显示的时候,不占用当前位置
ClientValidationFunction:设置定义客户端自定义校验函数
客户端脚本代码:


代码如下:

<head id="Head1" runat="server">
<title>Recipe15</title>
<script type="text/javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script>
<script type="text/javascript">
function ctvCar_Validation(sender, args) {
// CustomValidator控件通过自定义函数的参数args属性IsValid来判断是否验证通过
args.IsValid = ($("#chkCar input:checked").length >= 3);
}
</script>
</head>

最终显示效果:

时间: 2012-01-31

asp.net MaxLengthValidator 最大长度验证控件代码

复制代码 代码如下: /// <summary> /// TextBox的最大长度验证器,如果是varchar,char字段类型,需要此验证 /// </summary> [Description("对MaxLength进行验证")] [ToolboxData("<{0}:MaxLengthValidator runat=server></{0}:MaxLengthValidator>")] public class

验证控件与Button的OnClientClick事件详细解析

一.事件 这是一个长期被我忽略或者是没有发现的问题,问题是这样的: 在一个页面中,当有验证控件的时候,当Button控件触发OnClientClick事件,并且这个事件会返回true和false的时候,验证控件就会失效,不起作用了.具体描述如下: .Net页面如下: 复制代码 代码如下: <form id="form1" runat="server"><asp:ScriptManager ID="ScriptManager1"

使用jQuery.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由

主要理由有以下几点: 1.拖控件太麻烦,这个是微软控件的常用方式,你要使用一个控件你得从工具栏中拖到页面里(当然你也可以不拖手写). 2.必须指定验证对象,验证控件与其他textbox,dropdownlist控件不同的是它是验证其他控件的输入是否有效的,所以必须指定所验证的对象. 3.影响整个页面美观,像一些管理系统总是需要进行大量的用户输入验证,所以就可能导致一个页面上有几十个验证控件严重影响了原来页面里的东西,看起来十分不舒服. 4.ajax验证不方便,现在的系统越来越注重客户的用户体验,

js控制.net验证控件是否可用。

function validChange() { // Do nothing if client validation is not active if (typeof (Page_Validators) == "undefined") return; if($("rbBotton_0").checked==false) { ValidatorEnable($('<%=RequiredFieldValidator5.ClientID%>'), false

fileupload控件 文件类型客户端验证实现代码

无标题页 function CheckFileType() { var objButton=document.getElementById("Button1");//上传按钮 var objFileUpload=document.getElementById('FileUpload1');//FileUpload var objMSG=document.getElementById('msg');//显示提示信息用的DIV var FileName=new String(objFile

jQuery Validate 验证,校验规则写在控件中的具体实例

将校验规则写到控件中 复制代码 代码如下: <script src="../js/jquery.js" type="text/javascript"></script><script src="../js/jquery.validate.js" type="text/javascript"></script><script src="./js/jquery.met

jQuery密码强度验证控件使用详解

本文实例为大家分享了jQuery密码强度验证控件,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="jquery-1.12.1.js"></script>

ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList

界面代码: 复制代码 代码如下: <form id="form1" runat="server"> <div align="center"> <fieldset style="width: 350px; height: 200px;"> <table border="0" cellpadding="3" cellspacing="3&q

基于jquery实现的服务器验证控件的启用和禁用代码

应用背景 1.用户需要填写表单时.2.页面采用服务器验证控件.3.由用户来选择是否填写更多项,更多项的显示与隐藏用Display控制,如下图. 点击"增加服务内容",显示新增表单项,如下图. 点击"取消增加",隐藏新增表单项. 问题:用户点击下一步时,不对Display=none的新增区域表单进行验证,需要在用户点击"取消增加时",禁用服务器验证控件.反之,启用服务器验证控件. 解决方法 还是使用JQuery来搞定吧,主要是太好用了. 1.输出要

教你用AngularJS框架一行JS代码实现控件验证效果

如上图所示,我们需要实现如下这些验证功能: 控件都是必输控件 都需要控制最大长度 第一次打开页面,控件不能显示为错误状态 输入内容再清空后,必输控件需要显示为错误状态 只有所有输入合法后,发布按钮才能变为可用状态 通过AngularJS,我们可以很轻松的实现这些要求,只需要1行JS代码.UI样式这里采用的是Bootstrap.先上示例代码: HTML. <!DOCTYPE html> <html lang="zh-cn" ng-app="ftitApp&qu

JS封装的三级联动菜单(使用时只需要一行js代码)

前言 在实际的项目开发中,我们经常需要三级联动,比如省市区的选择,商品的三级分类的选择等等. 而网上却找不到一个代码完整.功能强大.使用简单的三级联动菜单,大都只是简单的讲了一下实现思路. 下面就给大家分享我在工作中封装并在项目中使用的三级级联操作代码,如有错误或者不当的地方欢迎大家指正. 使用简单(只需要一行代码) 可以根据需要设置是否显示"请选择"项 支持回调(在三级分类加载完成后触发回调事件) 支持一个页面多个级联菜单 演示效果预览: 三级联动封装 原理:将selec标签以及相关

JS代码实现table数据分页效果

第一个:实现的很常见很简单的显示页数翻页 效果图: •这是HTML代码,很简单滴(我好像看到了被嫌弃的小眼神) <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-"> <script src="js/jquery-...js"></script> <script src="js/demo.js

学习vue.js表单控件绑定操作

本文实例为大家分享了vue.js表单控件绑定的具体代码,供大家参考,具体内容如下 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单控件绑定</title> </head> <body> <!-- v-model在表单控件元素上实现数据的双向绑定 -->

AngularJS仿苹果滑屏删除控件

AngularJs被用来开发单页面应用程序(SPA),利用AJAX调用配合页面的局部刷新,可以减少页面跳转,从而获得更好的用户体验.Angular的ngView及其对应的强大路由机制,是实现SPA应用的核心模块.本文所说的页面切换指的就是这个路由机制,即根据不同的url展示不同的视图. 前端开发中,为了对列表项进行快捷操作,有时就添个按钮来简单实现.但是,有时会发现按钮影响美观,甚至影响列表行的布局.稍在网上搜索无果,而写此仿苹果滑屏删除控件. 依赖项:angularJS.jQuery 测试浏览

ASP.NET中日历控件和JS版日历控件的使用方法(第5节)

今天小编带大家以做任务的形式了解ASP.NET中日历控件的使用方法,主要任务内容: 1.添加一个日历,设置日期以蓝色的完整名称显示,周末以黄色背景红色文字显示,而当前日期使用绿色背景显示,用户可以选择一天.一周或整个月,被选的天/周/月使用灰色背景色来显示.当选中一个日期后,把时间显示在下面的一个文本框中,效果如图所示: 2.设计一个注册页面,使用js日历控件帮助用户输入出生日期.效果如图所示: 学习项目一  Calendar日历控件 1.在站点下创建一个Calendar页面,并在页面上拖放一个

js重写alert控件(适合学习js的新手朋友)

纯粹是为了打发时间,手写了一个JS的 alert控件. 代码如下: <html> <head> <script type="text/javascript"> var alertObj = new Object(); var generalStyle = { zIndex: 0, width: "200px", height: "100px", border: "thick solid #CCCCCC

JS实现OCX控件的事件响应示例

JS支持OCX控件的事件(event),当OCX控件定义的事件发生时,JS可以捕获该事件并对事件进行相应的处理. 个人理解,其实就是事件的响应由谁来完成,OCX控件自身肯定是可以实现的,JS提供的这种机制使JS也可以完成OCX控件事件的响应. 简单举例如下: 首先在OCX控件中添加自定义事件(预定义事件同理,如鼠标点击等,没亲自试,感觉原理应该是一样的), 事件应该是属于窗口的,所以在Ctrl类上单击右键,Add->Add Event,如下图: 在打开的对话框中输入事件名称,例如OnChange

Android 代码写控件代替XML简单实例

Android 代码写控件代替XML简单实例 简单的一个Button控件的练习. 实现代码: Button btn = new Button(HandlerToActivity.this); LinearLayout.LayoutParams params=new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT); params.gravity = Gravity.CENTER_HORIZONTAL; param

Vue.js 表单控件操作小结

概念说明 v-model指令:在表单控件元素上创建双向数据绑定.v-model 会根据控件类型自动选取正确的方法来更新元素. 输入框 实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定: HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</tit