快捷導(dǎo)航

使用CustomValidator自定義驗(yàn)證控件檢查是否有對(duì)ListBox控件選擇

更新時(shí)間：2013年01月23日 08:59:26 作者：

在網(wǎng)頁前端處，我們放置ListBox控件，在數(shù)據(jù)提交前，檢查用戶是否有對(duì)此控件進(jìn)行選擇？小編將介紹使用Javascript與CustomValidator自定義驗(yàn)證控件來檢查感興趣的朋友可以了解下

在前網(wǎng)頁前端處，我們放置ListBox控件，在數(shù)據(jù)提交前，檢查用戶是否有對(duì)此控件進(jìn)行選擇？ Insus.NET的方法是使用Javascript與CustomValidator自定義驗(yàn)證控件來檢查。
可以看到最終結(jié)果：

你也想?yún)⒋死?，可以參考下面?shù)據(jù)與準(zhǔn)備方法，寫一個(gè)對(duì)象，它將用來產(chǎn)生十個(gè)天干。
HeavenlyStem.cs

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

 
using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
/// <summary> 
/// Summary description for HeavenlyStem 
/// </summary> 
public class HeavenlyStem 
{ 
private int _ID; 
private string _Name; 
public int ID 
{ 
get { return _ID; } 
set { _ID = value; } 
} 
public string Name 
{ 
get { return _Name; } 
set { _Name = value; } 
} 
public HeavenlyStem() 
{ 
// 
// TODO: Add constructor logic here 
// 
} 
public HeavenlyStem(int id, string name) 
{ 
this.ID = id; 
this._Name = name; 
} 
} 

產(chǎn)生與用泛型來存儲(chǔ)它們：

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

 
private List<HeavenlyStem> GetHeavenStem() 
{ 
List<HeavenlyStem> ListHS = new List<HeavenlyStem>(); 
HeavenlyStem hs = new HeavenlyStem(); 
hs.ID = 1; 
hs.Name = "甲"; 
ListHS.Add(hs); 
hs = new HeavenlyStem(); 
hs.ID = 2; 
hs.Name = "乙"; 
ListHS.Add(hs); 
hs = new HeavenlyStem(); 
hs.ID = 3; 
hs.Name = "丙"; 
ListHS.Add(hs); 
hs = new HeavenlyStem(); 
hs.ID = 4; 
hs.Name = "丁"; 
ListHS.Add(hs); 
hs = new HeavenlyStem(); 
hs.ID = 5; 
hs.Name = "戊"; 
ListHS.Add(hs); 
hs = new HeavenlyStem(); 
hs.ID = 6; 
hs.Name = "己"; 
ListHS.Add(hs); 
hs = new HeavenlyStem(); 
hs.ID = 7; 
hs.Name = "庚"; 
ListHS.Add(hs); 
hs = new HeavenlyStem(); 
hs.ID = 8; 
hs.Name = "辛"; 
ListHS.Add(hs); 
hs = new HeavenlyStem(); 
hs.ID = 9; 
hs.Name = "壬"; 
ListHS.Add(hs); 
hs = new HeavenlyStem(); 
hs.ID = 10; 
hs.Name = "癸"; 
ListHS.Add(hs); 
return ListHS; 
} 

Html標(biāo)記：

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

 
<asp:ListBox ID="ListBoxHeavenlyStem" runat="server" Width="60" Height="160" SelectionMode="Multiple"></asp:ListBox> 
<asp:CustomValidator ID="CustomValidator1" runat="server" Display="None" ErrorMessage="必須選擇選項(xiàng)" ClientValidationFunction="ValidateListBox"></asp:CustomValidator> 
<asp:ValidationSummary ID="ValidationSummary1" runat="server" EnableClientScript="true" 
ShowMessageBox="true" ShowSummary="false" /> 
<asp:Button ID="Button1" runat="server" Text="Submit" /> 

接下來，你需要在.aspx.cs為L(zhǎng)istBox控件綁定數(shù)據(jù)，數(shù)據(jù)源即是剛才產(chǎn)生的List<HeavenlyStem>：

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

 
using System.Collections.Generic; 
using System.Data; 
using System.Data.OleDb; 
using System.Linq; 
using System.Web; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
using Insus.NET; 
public partial class _Default : System.Web.UI.Page 
{ 
protected void Page_Load(object sender, EventArgs e) 
{ 
if (!IsPostBack) 
Data_Binding(); 
} 
private void Data_Binding() 
{ 
this.ListBoxHeavenlyStem.DataSource = GetHeavenStem(); 
this.ListBoxHeavenlyStem.DataTextField = "Name"; 
this.ListBoxHeavenlyStem.DataValueField = "ID"; 
this.ListBoxHeavenlyStem.DataBind(); 
} 
} 

最后是寫Javascript腳本：

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

 
function ValidateListBox(sender, args) { 
var lb = document.getElementById("<%=ListBoxHeavenlyStem.ClientID%>") 
var options = lb.options; 
args.IsValid = false; 
for (var i = 0; i < options.length; i++) { 
if (options[i].selected == true) { 
args.IsValid = true; 
return; 
} 
} 
} 

您可能感興趣的文章: