ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList


Posted in Javascript onFebruary 03, 2012

先看界面代码:

<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:DropDownList ID="dllCar" runat="server" ToolTip="至少选择一种车!" CssClass="required"> 
<asp:ListItem Value="" Text="---请选择---"></asp:ListItem> 
<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:DropDownList> 
</td> 
</tr> 
<tr> 
<td> 
<asp:Button ID="btnSubmit" runat="server" Text="提交" /> 
</td> 
</tr> 
</table> 
</fieldset> 
<div id="message" class="alertmsg"> 
</div> 
</div> 
</form>

DropDownList控件属性ToolTip会转换为Title,title的值可以作为校验规则required的提示信息,属性CssClass的值required就指定了插件的校验规则。

脚本代码:

<head id="Head1" runat="server"> 
<title>Recipe18</title> 
<script type="text/javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script> 
<script type="text/javascript" src="Scripts/jquery.validate.js"></script> 
<script type="text/javascript"> 
$(function () { 
$("#form1").validate({ 
errorLabelContainer: $("#message") 
}); 
}); 
</script> 
<style type="text/css"> 
.alertmsg 
{ 
color: #FF0000; 
} 
</style> 
</head>

显示效果:

ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList


另外如果不设置DropDownList的属性ToolTip和CssClass,脚本代码改为如下,也可以实现同样的效果:
<script type="text/javascript"> 
$(function () { 
$("#form1").validate({ 
rules: { dllCar: "required" }, 
messages: { dllCar: "至少选择一种车!" }, 
errorLabelContainer: $("#message") 
}); 
}); 
</script>
Javascript 相关文章推荐
jQuery.extend 函数的详细用法
Jun 27 Javascript
jquery禁用右键单击功能屏蔽F5刷新
Mar 17 Javascript
javascript中Date()函数在各浏览器中的显示效果
Jun 18 Javascript
基于javascript显示当前时间以及倒计时功能
Mar 18 Javascript
jQuery下拉框的简单应用
Jun 24 Javascript
Jq通过td获取同行其它列td的方法
Oct 05 Javascript
详解jQuery简单的表格应用
Dec 16 Javascript
vue不通过路由直接获取url中参数的方法示例
Aug 24 Javascript
node和vue实现商城用户地址模块
Dec 05 Javascript
Vue中对iframe实现keep alive无刷新的方法
Jul 23 Javascript
详解vue中$nextTick和$forceUpdate的用法
Dec 11 Javascript
JavaScript展开运算符和剩余运算符的区别详解
Feb 18 Javascript
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
Feb 03 #Javascript
ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList
Feb 03 #Javascript
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
Feb 03 #Javascript
ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围
Feb 03 #Javascript
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
Feb 03 #Javascript
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
Feb 03 #Javascript
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
Feb 03 #Javascript
You might like
总集篇&特番节目先行播出!《SAO Alicization War of Underworld》第2季度TV动画4月25日放送!
2020/03/06 日漫
多重?l件?合查?(一)
2006/10/09 PHP
CentOS安装php v8js教程
2015/02/26 PHP
laravel 数据验证规则详解
2019/10/23 PHP
点击下载链接 弹出页面实现代码
2009/10/01 Javascript
javascript下arguments,caller,callee,call,apply示例及理解
2009/12/24 Javascript
分享27个jQuery 表单插件集合推荐
2011/04/25 Javascript
JQuery 1.6发布 性能提升,同时包含大量破坏性变更
2011/05/10 Javascript
javascript获得网页窗口实际大小的示例代码
2013/09/21 Javascript
JS操作HTML自定义属性的方法
2015/02/10 Javascript
js字符串截取函数slice、substring和substr的比较
2016/05/17 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
2016/10/13 Javascript
Jquery Easyui表单组件Form使用详解(30)
2016/12/19 Javascript
微信小程序 flex实现导航实例详解
2017/04/26 Javascript
Vuex利用state保存新闻数据实例
2017/06/28 Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
2017/09/14 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
2018/03/13 Javascript
如何为vuex实现带参数的 getter和state.commit
2019/01/04 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
2019/03/13 Javascript
vue中利用three.js实现全景图的完整示例
2020/12/07 Vue.js
Vue如何跨组件传递Slot的实现
2020/12/14 Vue.js
JavaScript仿京东轮播图效果
2021/02/25 Javascript
python写的ARP攻击代码实例
2014/06/04 Python
使用Python中的线程进行网络编程的入门教程
2015/04/15 Python
解决PyCharm不运行脚本,而是运行单元测试的问题
2019/01/17 Python
python2爬取百度贴吧指定关键字和图片代码实例
2019/08/14 Python
python multiprocessing模块用法及原理介绍
2019/08/20 Python
python使用正则表达式(Regular Expression)方法超详细
2019/12/30 Python
Python SSL证书验证问题解决方案
2020/01/13 Python
Python super()方法原理详解
2020/03/31 Python
HTML文本属性&amp;颜色控制属性的实现
2019/12/17 HTML / CSS
amazeui页面分析之登录页面的示例代码
2020/08/25 HTML / CSS
Jo Malone美国官网:祖玛珑香水
2017/03/27 全球购物
2015年学校信息技术工作总结
2015/05/25 职场文书
使用Python的开发框架Brownie部署以太坊智能合约
2021/05/28 Python
Django模型层实现多表关系创建和多表操作
2021/07/21 Python