ASP.NET jQuery 食谱18 (通过使用jQuery validation插件校验DropDownList)
2012-01-31 23:23
856 查看
这节我们还可以通过直接设置DropDownList属性来设置jQuery validation插件的校验规则和提示信息。
先看界面代码:
DropDownList控件属性ToolTip会转换为Title,title的值可以作为校验规则required的提示信息,属性CssClass的值required就指定了插件的校验规则。
脚本代码:
显示效果:
另外如果不设置DropDownList的属性ToolTip和CssClass,脚本代码改为如下,也可以实现同样的效果:
先看界面代码:
<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>
相关文章推荐
- ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
- ASP.NET jQuery 食谱17 (通过使用jQuery validation插件校验ListBox)
- ASP.NET jQuery 食谱11 (通过使用jQuery validation插件简单实现用户登录页面验证功能)
- ASP.NET jQuery 食谱12 (通过使用jQuery validation插件简单实现用户注册页面验证功能)
- ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
- ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
- ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
- ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
- ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
- ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
- ASP.NET jQuery 食谱19 (通过jQuery操作GridView技巧集合)(转)
- JQuery插件中的treeview与asp.net mvc的结合使用实例(转)-附加自己的写法
- ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
- JQuery插件中的treeview与asp.net mvc的结合使用实例(转)-附加自己的写法
- 关于 jquery Uploadify 上传插件 在 asp.net中 的使用
- JQuery上传插件Uploadify使用详解 asp.net版
- 详细讲解jquery带进度上传插件Uploadify(ASP.NET版本)使用
- asp.net 使用JQuery 调用Ashx 后面直接写方法名,通过反射找到对应的方法
- JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
- 在Asp.net中使用JQuery插件之jTip代码