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ù)
客戶端腳本代碼:
<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>
最終顯示效果:
復(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: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>
最終顯示效果:
您可能感興趣的文章:
- jQuery Validate 驗(yàn)證,校驗(yàn)規(guī)則寫在控件中的具體實(shí)例
- ASP.NET jQuery 實(shí)例16 通過(guò)控件CustomValidator驗(yàn)證RadioButtonList
- 使用jQuery.Validate進(jìn)行客戶端驗(yàn)證(初級(jí)篇) 不使用微軟驗(yàn)證控件的理由
- 基于jquery實(shí)現(xiàn)的服務(wù)器驗(yàn)證控件的啟用和禁用代碼
- 教你用AngularJS框架一行JS代碼實(shí)現(xiàn)控件驗(yàn)證效果
- js控制.net驗(yàn)證控件是否可用。
- 驗(yàn)證控件與Button的OnClientClick事件詳細(xì)解析
- fileupload控件 文件類型客戶端驗(yàn)證實(shí)現(xiàn)代碼
- asp.net MaxLengthValidator 最大長(zhǎng)度驗(yàn)證控件代碼
- jQuery密碼強(qiáng)度驗(yàn)證控件使用詳解
相關(guān)文章
jQuery實(shí)現(xiàn)下拉菜單動(dòng)態(tài)添加數(shù)據(jù)點(diǎn)擊滑出收起其他功能
這篇文章主要介紹了jQuery實(shí)現(xiàn)下拉菜單動(dòng)態(tài)添加數(shù)據(jù)點(diǎn)擊滑出收起其他功能,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2018-06-06jQuery實(shí)現(xiàn)拖動(dòng)剪裁圖片作為頭像
本文主要介紹了jQuery實(shí)現(xiàn)拖動(dòng)剪裁圖片作為頭像的具體實(shí)例方法,具有很好的參考價(jià)值,下面跟著小編一起來(lái)看下吧2016-12-12jQuery動(dòng)畫效果-slideUp slideDown上下滑動(dòng)示例代碼
jQuery動(dòng)畫上下滑動(dòng)效果在網(wǎng)頁(yè)中的應(yīng)用還是比較廣泛的,其實(shí)很簡(jiǎn)單通過(guò)slideUp slideDown方法便可輕松實(shí)現(xiàn),具體如下,喜歡的朋友可以參考下,希望對(duì)大家學(xué)習(xí)jquery有所幫助2013-08-08jquery實(shí)現(xiàn)點(diǎn)擊其他區(qū)域時(shí)隱藏下拉div和遮罩層的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)點(diǎn)擊其他區(qū)域時(shí)隱藏下拉div和遮罩層的方法,涉及jQuery響應(yīng)鼠標(biāo)事件動(dòng)態(tài)改變頁(yè)面元素樣式的功能,需要的朋友可以參考下2015-12-12jQuery實(shí)現(xiàn)帶滑動(dòng)條的菜單效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)帶滑動(dòng)條的菜單效果代碼,涉及jquery遍歷頁(yè)面元素及動(dòng)態(tài)變換效果實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08基于jquery的finkyUI插件與Ajax實(shí)現(xiàn)頁(yè)面數(shù)據(jù)加載功能
基于jquery的finkyUI插件與Ajax實(shí)現(xiàn)頁(yè)面數(shù)據(jù)加載功能,需要的朋友可以參考下。2010-12-12