ASP.NET jQuery 實(shí)例15 通過(guò)控件CustomValidator驗(yàn)證CheckBoxList

更新時(shí)間：2012年02月03日 17:24:32 作者：

這節(jié)我們要講下如何通過(guò)控件CustomValidator來(lái)校驗(yàn)CheckBoxList,客戶端校驗(yàn)代碼通過(guò)jQuery實(shí)現(xiàn)

首先看下界面代碼：

 
<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:CheckBoxList ID="chkCar" runat="server"> 
<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:CheckBoxList> 
</td> 
</tr> 
<tr> 
<td> 
<asp:Button ID="btnSubmit" runat="server" Text="提交" /> 
</td> 
</tr> 
</table> 
</fieldset> 
<asp:CustomValidator ID="ctvCar" runat="server" Display="Dynamic" ErrorMessage="至少選擇三種車！" 
ForeColor="Red" ClientValidationFunction="ctvCar_Validation"></asp:CustomValidator> 
</div> 
</form> 

控件CustomValidator相關(guān)參數(shù)說(shuō)明：
ErrorMessage:設(shè)置校驗(yàn)提示信息
Display:設(shè)置顯示模式，Dynamic表示提示信息不顯示的時(shí)候，不占用當(dāng)前位置
ClientValidationFunction:設(shè)置定義客戶端自定義校驗(yàn)函數(shù)
客戶端腳本代碼：

復(fù)制代碼代碼如下:

 
<head id="Head1" runat="server"> 
<title>Recipe15</title> 
<script type="text/javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script> 
<script type="text/javascript"> 
function ctvCar_Validation(sender, args) { 
// CustomValidator控件通過(guò)自定義函數(shù)的參數(shù)args屬性IsValid來(lái)判斷是否驗(yàn)證通過(guò) 
args.IsValid = ($("#chkCar input:checked").length >= 3); 
} 
</script> 
</head> 

最終顯示效果：

您可能感興趣的文章:

相關(guān)文章

jQuery 美元符沖突的解決方法
jQuery 美元符沖突的解決方法，使用jquery與別的js庫(kù)共同使用的時(shí)候需要注意的地方。
2010-03-03
jquery列表拖動(dòng)排列(由項(xiàng)目提取相當(dāng)好用)
最好的jquery列表拖動(dòng)排列自定義拖動(dòng)層排列。當(dāng)點(diǎn)擊或拖動(dòng)列表時(shí)，可以自定義隨意拖放列表模塊到相應(yīng)位置
2014-06-06
jQuery實(shí)現(xiàn)仿美橙互聯(lián)兩級(jí)導(dǎo)航菜單效果完整實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)仿美橙互聯(lián)兩級(jí)導(dǎo)航菜單效果,以完整實(shí)例形式分析了jQuery響應(yīng)鼠標(biāo)事件實(shí)現(xiàn)針對(duì)頁(yè)面元素的遍歷及樣式的動(dòng)態(tài)操作技巧,需要的朋友可以參考下
2015-09-09
jQuery元素的隱藏與顯示實(shí)例
這篇文章主要介紹了jQuery元素的隱藏與顯示的方法,實(shí)例分析了hide與show的使用技巧,需要的朋友可以參考下
2015-01-01
jQuery數(shù)據(jù)緩存功能的實(shí)現(xiàn)思路及簡(jiǎn)單模擬
jQuery緩存系統(tǒng)不僅運(yùn)用于DOM元素，動(dòng)畫(huà)、事件等都有用到這個(gè)緩存系統(tǒng)
2013-05-05
jq stop()和:is(:animated)的用法及區(qū)別(詳解)
下面小編就為大家?guī)?lái)一篇jq stop()和:is(:animated)的用法及區(qū)別(詳解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-02-02
jQuery實(shí)現(xiàn)常見(jiàn)的隱藏與展示列表效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)常見(jiàn)的隱藏與展示列表效果,結(jié)合完整實(shí)例形式分析了jQuery事件響應(yīng)及針對(duì)頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2018-06-06
jQuery中innerWidth()方法用法實(shí)例
這篇文章主要介紹了jQuery中innerWidth()方法用法,實(shí)例分析了innerWidth()方法的功能、定義及獲取第一個(gè)匹配元素內(nèi)部區(qū)域?qū)挾鹊氖褂眉记?需要的朋友可以參考下
2015-01-01
jquery中ajax學(xué)習(xí)筆記4
本節(jié)主要介紹兩點(diǎn)：1.緩存問(wèn)題 2.中文問(wèn)題
2011-10-10
jQuery彈出窗口打開(kāi)鏈接的實(shí)現(xiàn)代碼
這篇文章主要介紹了jQuery彈出窗口打開(kāi)鏈接的實(shí)現(xiàn)代碼,需要的朋友可以參考下
2016-12-12