ASP.NET jQuery 實例15 通過控件CustomValidator驗證CheckBoxList
更新時間：2012年02月03日 17:24:32 作者：
這節(jié)我們要講下如何通過控件CustomValidator來校驗CheckBoxList,客戶端校驗代碼通過jQuery實現(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>
請選擇汽車類型：
</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ù)說明：
ErrorMessage:設(shè)置校驗提示信息
Display:設(shè)置顯示模式，Dynamic表示提示信息不顯示的時候，不占用當前位置
ClientValidationFunction:設(shè)置定義客戶端自定義校驗函數(shù)
客戶端腳本代碼：
<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控件通過自定義函數(shù)的參數(shù)args屬性IsValid來判斷是否驗證通過
args.IsValid = ($("#chkCar input:checked").length >= 3);
}
</script>
</head>
最終顯示效果：
復(fù)制代碼 代碼如下:
<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: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ù)說明：
ErrorMessage:設(shè)置校驗提示信息
Display:設(shè)置顯示模式，Dynamic表示提示信息不顯示的時候，不占用當前位置
ClientValidationFunction:設(shè)置定義客戶端自定義校驗函數(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控件通過自定義函數(shù)的參數(shù)args屬性IsValid來判斷是否驗證通過
args.IsValid = ($("#chkCar input:checked").length >= 3);
}
</script>
</head>
最終顯示效果：
您可能感興趣的文章:
- jQuery Validate 驗證,校驗規(guī)則寫在控件中的具體實例
- ASP.NET jQuery 實例16 通過控件CustomValidator驗證RadioButtonList
- 使用jQuery.Validate進行客戶端驗證（初級篇） 不使用微軟驗證控件的理由
- 基于jquery實現(xiàn)的服務(wù)器驗證控件的啟用和禁用代碼
- 教你用AngularJS框架一行JS代碼實現(xiàn)控件驗證效果
- js控制.net驗證控件是否可用。
- 驗證控件與Button的OnClientClick事件詳細解析
- fileupload控件 文件類型客戶端驗證實現(xiàn)代碼
- asp.net MaxLengthValidator 最大長度驗證控件代碼
- jQuery密碼強度驗證控件使用詳解
相關(guān)文章
jQuery 美元符沖突的解決方法，使用jquery與別的js庫共同使用的時候需要注意的地方。2010-03-03
最好的jquery列表拖動排列自定義拖動層排列。當點擊或拖動列表時，可以自定義隨意拖放列表模塊到相應(yīng)位置2014-06-06
jQuery實現(xiàn)仿美橙互聯(lián)兩級導(dǎo)航菜單效果完整實例
這篇文章主要介紹了jQuery實現(xiàn)仿美橙互聯(lián)兩級導(dǎo)航菜單效果,以完整實例形式分析了jQuery響應(yīng)鼠標事件實現(xiàn)針對頁面元素的遍歷及樣式的動態(tài)操作技巧,需要的朋友可以參考下2015-09-09
這篇文章主要介紹了jQuery元素的隱藏與顯示的方法,實例分析了hide與show的使用技巧,需要的朋友可以參考下2015-01-01
jQuery數(shù)據(jù)緩存功能的實現(xiàn)思路及簡單模擬
jQuery緩存系統(tǒng)不僅運用于DOM元素，動畫、事件等都有用到這個緩存系統(tǒng)2013-05-05
jq stop()和:is(:animated)的用法及區(qū)別(詳解)
下面小編就為大家?guī)硪黄猨q stop()和:is(:animated)的用法及區(qū)別(詳解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
這篇文章主要介紹了jQuery實現(xiàn)常見的隱藏與展示列表效果,結(jié)合完整實例形式分析了jQuery事件響應(yīng)及針對頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2018-06-06
這篇文章主要介紹了jQuery中innerWidth()方法用法,實例分析了innerWidth()方法的功能、定義及獲取第一個匹配元素內(nèi)部區(qū)域?qū)挾鹊氖褂眉记?需要的朋友可以參考下2015-01-01
本節(jié)主要介紹兩點：1.緩存問題 2.中文問題2011-10-10
這篇文章主要介紹了jQuery彈出窗口打開鏈接的實現(xiàn)代碼,需要的朋友可以參考下2016-12-12