这个技巧是非常有用。如果我们有多个控件,我们只用一个验证控件来验证它 。这将减少页面大小和改善性能,因为每个验证控件在客户端都会被渲染成span,如果一个页面包含上百个控件,就会使得页面非常的庞大臃肿。
在这篇文章的Demo中,动态创建的几个textbox,我只使用一个验证控件去验证它们。
1.aspx页面上:
1
<
body
>
2 < form id = " form1 " runat = " server " >
3 < div >
4 < asp:CustomValidator ID = " CustomValidator1 " runat = " server " ></ asp:CustomValidator >
5 < asp:ValidationSummary ID = " ValidationSummary1 " runat = " server " />
6 </ div >
7
8 </ form >
9 </ body >
2 < form id = " form1 " runat = " server " >
3 < div >
4 < asp:CustomValidator ID = " CustomValidator1 " runat = " server " ></ asp:CustomValidator >
5 < asp:ValidationSummary ID = " ValidationSummary1 " runat = " server " />
6 </ div >
7
8 </ form >
9 </ body >
2.在服务端将验证控件和TextBox的onfocus事件关联起来:
1
protected
void
Page_Load(
object
sender, EventArgs e)
2 {
3 if ( ! IsPostBack)
4 {
5 for ( int i = 0 ; i < 10 ; i ++ )
6 {
7 TextBox tb = new TextBox();
8 tb.ID = " tb " + i.ToString();
9 tb.Attributes.Add( " onfocus " , " HookUpControl(this,' " + CustomValidator1.ClientID + " ') " );
10 Page.Form.Controls.Add(tb);
11 }
12 }
13 }
2 {
3 if ( ! IsPostBack)
4 {
5 for ( int i = 0 ; i < 10 ; i ++ )
6 {
7 TextBox tb = new TextBox();
8 tb.ID = " tb " + i.ToString();
9 tb.Attributes.Add( " onfocus " , " HookUpControl(this,' " + CustomValidator1.ClientID + " ') " );
10 Page.Form.Controls.Add(tb);
11 }
12 }
13 }
3.HookUpControl函数如下:
1
function
HookUpControl(curObj, validatorClientID)
2 {
3 var validationControl = document.getElementById(validatorClientID);
4 validationControl.controltovalidate = curObj.id;
5 validationControl.clientvalidationfunction = " validatetextbox " ;
6 validationControl.validateemptytext = " true " ;
7 ValidatorHookupControl(curObj, validationControl);
8 }
2 {
3 var validationControl = document.getElementById(validatorClientID);
4 validationControl.controltovalidate = curObj.id;
5 validationControl.clientvalidationfunction = " validatetextbox " ;
6 validationControl.validateemptytext = " true " ;
7 ValidatorHookupControl(curObj, validationControl);
8 }
4.客户端的验证函数如下:
1
function
validatetextbox(sender, args)
2 {
3 if (args.Value == "" )
4 {
5 sender.errormessage = " <b>该栏位不能为空。 " ;
6 sender.innerHTML = " <b>该栏位不能为空。 " ;
7 args.IsValid = false ;
8 return ;
9 }
10 if (isNaN(args.Value))
11 {
12 sender.errormessage = " <b>该栏位只能是数字。 " ;
13 sender.innerHTML = " <b>该栏位只能是数字。 " ;
14 args.IsValid = false ;
15 return ;
16 }
17 if (Number(args.Value) < 100 ) {
18 sender.errormessage = " <b>该栏位的值不能小于100。</b> " ;
19 sender.innerHTML = " <b>该栏位的值不能小于100。</b> " ;
20 args.IsValid = false ;
21 return ;
22 }
23 }
2 {
3 if (args.Value == "" )
4 {
5 sender.errormessage = " <b>该栏位不能为空。 " ;
6 sender.innerHTML = " <b>该栏位不能为空。 " ;
7 args.IsValid = false ;
8 return ;
9 }
10 if (isNaN(args.Value))
11 {
12 sender.errormessage = " <b>该栏位只能是数字。 " ;
13 sender.innerHTML = " <b>该栏位只能是数字。 " ;
14 args.IsValid = false ;
15 return ;
16 }
17 if (Number(args.Value) < 100 ) {
18 sender.errormessage = " <b>该栏位的值不能小于100。</b> " ;
19 sender.innerHTML = " <b>该栏位的值不能小于100。</b> " ;
20 args.IsValid = false ;
21 return ;
22 }
23 }
其实主要使用了ValidatorHookupControl(curObj, validationControl)的功能。
在第一个TextBox中输入1,提示:该栏位的值不能小于100。
在第二个TextBox中输入a,提示:该栏位只能是数字。
在第三个TextBox输入值,失去焦点后,再删除,提示:该栏位不能为空。。
onfocus事件可以换成你相应的事件,validatetextbox函数也可以扩展等等。
本文转自麒麟博客园博客,原文链接:http://www.cnblogs.com/zhuqil/archive/2010/03/16/Validator.html,如需转载请自行联系原作者