ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
更新时间：2012年02月03日 17:31:34 作者：
这节我们还可以通过直接设置DropDownList属性来设置jQuery validation插件的校验规则和提示信息
先看界面代码：
<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>
显示效果：
另外如果不设置DropDownList的属性ToolTip和CssClass,脚本代码改为如下，也可以实现同样的效果：
<script type="text/javascript">
$(function () {
$("#form1").validate({
rules: { dllCar: "required" },
messages: { dllCar: "至少选择一种车！" },
errorLabelContainer: $("#message")
});
});
</script>
复制代码 代码如下:
<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>
显示效果：
另外如果不设置DropDownList的属性ToolTip和CssClass,脚本代码改为如下，也可以实现同样的效果：
复制代码 代码如下:
<script type="text/javascript">
$(function () {
$("#form1").validate({
rules: { dllCar: "required" },
messages: { dllCar: "至少选择一种车！" },
errorLabelContainer: $("#message")
});
});
</script>
您可能感兴趣的文章:
- jQuery插件Validation快速完成表单验证的方式
- jQuery Validation PlugIn的使用方法详解
- jquery插件validation实现验证身份证号等
- jQuery验证插件validation使用指南
- jquery validation验证电话号码,email(实例代码)
- ASP.NET中实现jQuery Validation-Engine的Ajax验证
- ASP.NET中实现jQuery Validation-Engine的Ajax验证实现代码
- 修改jQuery Validation里默认的验证方法
- ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
- jQuery Validation实例代码 让验证变得如此容易
- 详解jQuery的表单验证插件--Validation
相关文章
这篇文章主要介绍了jQuery样式操作方法，并通过实际案例更浅显的理解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-10-10
这篇文章主要介绍了基于jquery实现左右按钮点击的图片切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2015-11-11
zTree 是利用 JQuery 的核心代码，实现一套能完成大部分常用功能的 Tree 插件。接下来通过本文给大家分享ztree实现左边动态生成树右边为内容详情功能，需要的朋友参考下吧2017-11-11
项目中需要用到打印HTML页面，需要指定区域打印，使用jquery.PrintArea.js 插件实现分页,需要的朋友可以参考下2014-07-07
这篇文章主要为大家详细介绍了jQuery实现查看图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
这篇文章主要介绍了jQuery实现可移动选项的左右下拉列表,涉及jQuery针对表格table及页面元素动态操作的相关技巧,需要的朋友可以参考下2016-12-12
jQuery EasyUI中DataGird动态生成列的方法
EasyUI中使用DataGird显示数据列表中，有时需要根据需要显示不同的列，例如，在权限管理中，不同的用户登录后只能查看自己权限范围内的列表字段，这就需要DataGird动态组合列，下面介绍EasyUI中DataGird动态生成列的方法2016-04-04
这篇文章主要介绍了原生js获取浏览器和对象宽高与jquery获取浏览器和对象宽高的方法关系对比,十分实用，需要的朋友可以参考下2015-04-04
jquery实现checkbox全选、取消全选的代码。2010-03-03
这篇文章主要介绍了jQuery实现响应鼠标滚动的动感菜单效果,可实现鼠标滑过菜单项呈现文字上下滑动变换的效果,涉及jQuery页面元素样式的动态设置技巧,需要的朋友可以参考下2015-09-09
最新评论