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 相关文章推荐
由浅到深了解JavaScript类
Sep 08 Javascript
用javascript实现分割提取页面所需内容
May 09 Javascript
jQuery中:enabled选择器用法实例
Jan 04 Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
Jan 27 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
Apr 17 Javascript
Vue.js第四天学习笔记
Dec 02 Javascript
在vue组件中使用axios的方法
Mar 16 Javascript
vue项目中全局引入1个.scss文件的问题解决
Aug 01 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
Aug 16 Javascript
ES6学习笔记之let与const用法实例分析
Jan 22 Javascript
JavaScript中的this原理及6种常见使用场景详解
Feb 14 Javascript
vue 导出文件,携带请求头token操作
Sep 10 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
php 保留小数点
2009/04/21 PHP
php ImageMagick windows下安装教程
2015/01/26 PHP
thinkPHP导出csv文件及用表格输出excel的方法
2015/12/30 PHP
Firefox下提示illegal character并出现乱码的原因
2010/03/25 Javascript
JS跨域总结
2012/08/30 Javascript
JavaScript中的this关键字介绍与使用实例
2013/06/21 Javascript
原生js事件的添加和删除的封装
2014/07/01 Javascript
JavaScript使用Prototype实现面向对象的方法
2015/04/14 Javascript
javascript基础知识
2016/06/07 Javascript
JS实现数字格式千分位相互转换方法
2016/08/01 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
2017/01/03 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
2017/03/23 jQuery
react.js 获取真实的DOM节点实例(必看)
2017/04/17 Javascript
webpack构建换肤功能的思路详解
2017/11/27 Javascript
AngularJS自定义过滤器用法经典实例总结
2018/05/17 Javascript
详解Bootstrap 学习(一)入门
2019/04/12 Javascript
Python中pip安装非PyPI官网第三方库的方法
2015/06/02 Python
python 时间戳与格式化时间的转化实现代码
2016/03/23 Python
Python实现注册、登录小程序功能
2018/09/21 Python
解决Python获取字典dict中不存在的值时出错问题
2018/10/17 Python
Pycharm之快速定位到某行快捷键的方法
2019/01/20 Python
Python之——生成动态路由轨迹图的实例
2019/11/22 Python
如何利用python之wxpy模块玩转微信
2020/08/17 Python
Python计算矩阵的和积的实例详解
2020/09/10 Python
详解rem 适配布局
2018/10/31 HTML / CSS
Antonioli美国在线商店:时尚前卫奢华
2019/07/29 全球购物
学前教育毕业生自荐信
2013/10/29 职场文书
建筑施工员岗位职责
2013/11/26 职场文书
教育局长自荐信范文
2013/12/22 职场文书
销售顾问工作计划书
2014/08/15 职场文书
师德师风自查总结
2014/10/14 职场文书
检查机关领导群众路线教育实践活动个人整改措施
2014/10/28 职场文书
网络营销实训总结
2015/08/03 职场文书
《祁黄羊》教学反思
2016/02/20 职场文书
心得体会该怎么写呢?
2019/06/27 职场文书
浅谈Python中的函数(def)及参数传递操作
2021/05/25 Python