ASP.NET jQuery 實(shí)例18 通過使用jQuery validation插件校驗(yàn)DropDownList
更新時(shí)間：2012年02月03日 17:31:34 作者：
這節(jié)我們還可以通過直接設(shè)置DropDownList屬性來設(shè)置jQuery validation插件的校驗(yàn)規(guī)則和提示信息
先看界面代碼：
<form id="form1" runat="server">
<div align="center">
<fieldset style="width: 350px; height: 200px;">
<table border="0" cellpadding="3" cellspacing="3">
<tr>
<td>
請(qǐng)選擇汽車類型：
</td>
</tr>
<tr>
<td>
<asp:DropDownList ID="dllCar" runat="server" ToolTip="至少選擇一種車！" CssClass="required">
<asp:ListItem Value="" Text="---請(qǐng)選擇---"></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="現(xiàn)代汽車"></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會(huì)轉(zhuǎn)換為Title，title的值可以作為校驗(yàn)規(guī)則required的提示信息，屬性CssClass的值required就指定了插件的校驗(yàn)規(guī)則。
腳本代碼：
<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>
顯示效果：
另外如果不設(shè)置DropDownList的屬性ToolTip和CssClass,腳本代碼改為如下，也可以實(shí)現(xiàn)同樣的效果：
<script type="text/javascript">
$(function () {
$("#form1").validate({
rules: { dllCar: "required" },
messages: { dllCar: "至少選擇一種車！" },
errorLabelContainer: $("#message")
});
});
</script>
復(fù)制代碼 代碼如下:
<form id="form1" runat="server">
<div align="center">
<fieldset style="width: 350px; height: 200px;">
<table border="0" cellpadding="3" cellspacing="3">
<tr>
<td>
請(qǐng)選擇汽車類型：
</td>
</tr>
<tr>
<td>
<asp:DropDownList ID="dllCar" runat="server" ToolTip="至少選擇一種車！" CssClass="required">
<asp:ListItem Value="" Text="---請(qǐng)選擇---"></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="現(xiàn)代汽車"></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會(huì)轉(zhuǎn)換為Title，title的值可以作為校驗(yàn)規(guī)則required的提示信息，屬性CssClass的值required就指定了插件的校驗(yàn)規(guī)則。
腳本代碼：
復(fù)制代碼 代碼如下:
<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>
顯示效果：
另外如果不設(shè)置DropDownList的屬性ToolTip和CssClass,腳本代碼改為如下，也可以實(shí)現(xiàn)同樣的效果：
復(fù)制代碼 代碼如下:
<script type="text/javascript">
$(function () {
$("#form1").validate({
rules: { dllCar: "required" },
messages: { dllCar: "至少選擇一種車！" },
errorLabelContainer: $("#message")
});
});
</script>
您可能感興趣的文章:
- jQuery插件Validation快速完成表單驗(yàn)證的方式
- jQuery Validation PlugIn的使用方法詳解
- jquery插件validation實(shí)現(xiàn)驗(yàn)證身份證號(hào)等
- jQuery驗(yàn)證插件validation使用指南
- jquery?validation驗(yàn)證電話號(hào)碼,email(實(shí)例代碼)
- ASP.NET中實(shí)現(xiàn)jQuery Validation-Engine的Ajax驗(yàn)證
- ASP.NET中實(shí)現(xiàn)jQuery Validation-Engine的Ajax驗(yàn)證實(shí)現(xiàn)代碼
- 修改jQuery Validation里默認(rèn)的驗(yàn)證方法
- ASP.NET jQuery 實(shí)例11 通過使用jQuery validation插件簡單實(shí)現(xiàn)用戶登錄頁面驗(yàn)證功能
- jQuery Validation實(shí)例代碼 讓驗(yàn)證變得如此容易
- 詳解jQuery的表單驗(yàn)證插件--Validation
相關(guān)文章
這篇文章主要介紹了jQuery樣式操作方法，并通過實(shí)際案例更淺顯的理解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-10-10
基于jquery實(shí)現(xiàn)左右按鈕點(diǎn)擊的圖片切換效果
這篇文章主要介紹了基于jquery實(shí)現(xiàn)左右按鈕點(diǎn)擊的圖片切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2015-11-11
ztree實(shí)現(xiàn)左邊動(dòng)態(tài)生成樹右邊為內(nèi)容詳情功能
zTree 是利用 JQuery 的核心代碼，實(shí)現(xiàn)一套能完成大部分常用功能的 Tree 插件。接下來通過本文給大家分享ztree實(shí)現(xiàn)左邊動(dòng)態(tài)生成樹右邊為內(nèi)容詳情功能，需要的朋友參考下吧2017-11-11
jQuery打印指定區(qū)域Html頁面并自動(dòng)分頁
項(xiàng)目中需要用到打印HTML頁面，需要指定區(qū)域打印，使用jquery.PrintArea.js 插件實(shí)現(xiàn)分頁,需要的朋友可以參考下2014-07-07
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)查看圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
jQuery實(shí)現(xiàn)可移動(dòng)選項(xiàng)的左右下拉列表示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)可移動(dòng)選項(xiàng)的左右下拉列表,涉及jQuery針對(duì)表格table及頁面元素動(dòng)態(tài)操作的相關(guān)技巧,需要的朋友可以參考下2016-12-12
jQuery EasyUI中DataGird動(dòng)態(tài)生成列的方法
EasyUI中使用DataGird顯示數(shù)據(jù)列表中，有時(shí)需要根據(jù)需要顯示不同的列，例如，在權(quán)限管理中，不同的用戶登錄后只能查看自己權(quán)限范圍內(nèi)的列表字段，這就需要DataGird動(dòng)態(tài)組合列，下面介紹EasyUI中DataGird動(dòng)態(tài)生成列的方法2016-04-04
這篇文章主要介紹了原生js獲取瀏覽器和對(duì)象寬高與jquery獲取瀏覽器和對(duì)象寬高的方法關(guān)系對(duì)比,十分實(shí)用，需要的朋友可以參考下2015-04-04
jquery checkbox全選、取消全選實(shí)現(xiàn)代碼
jquery實(shí)現(xiàn)checkbox全選、取消全選的代碼。2010-03-03
jQuery實(shí)現(xiàn)響應(yīng)鼠標(biāo)滾動(dòng)的動(dòng)感菜單效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)響應(yīng)鼠標(biāo)滾動(dòng)的動(dòng)感菜單效果,可實(shí)現(xiàn)鼠標(biāo)滑過菜單項(xiàng)呈現(xiàn)文字上下滑動(dòng)變換的效果,涉及jQuery頁面元素樣式的動(dòng)態(tài)設(shè)置技巧,需要的朋友可以參考下2015-09-09