教你只用一个Validator对多个控件进行验证

简介:

 这个技巧是非常有用。如果我们有多个控件,我们只用一个验证控件来验证它 。这将减少页面大小和改善性能,因为每个验证控件在客户端都会被渲染成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.在服务端将验证控件和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      }
复制代码

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          }
复制代码

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         }
复制代码

其实主要使用了ValidatorHookupControl(curObj, validationControl)的功能。

 

在第一个TextBox中输入1,提示:该栏位的值不能小于100。

在第二个TextBox中输入a,提示:该栏位只能是数字。

在第三个TextBox输入值,失去焦点后,再删除,提示:该栏位不能为空。。

onfocus事件可以换成你相应的事件,validatetextbox函数也可以扩展等等。




本文转自麒麟博客园博客,原文链接:http://www.cnblogs.com/zhuqil/archive/2010/03/16/Validator.html,如需转载请自行联系原作者

相关文章
|
8月前
|
JavaScript 前端开发 数据安全/隐私保护
Javascript知识【validation插件重写表单注册校验】
Javascript知识【validation插件重写表单注册校验】
|
JavaScript
VUE element-ui之form表单自定义验证11位手机号码(封装验证规则)
VUE element-ui之form表单自定义验证11位手机号码(封装验证规则)
3334 0
VUE element-ui之form表单自定义验证11位手机号码(封装验证规则)
|
1月前
element-ui中Form表单使用自定义验证规则
element-ui中Form表单使用自定义验证规则
16 0
|
8月前
|
数据安全/隐私保护
fastadmin中写接口是时Validate规则验证自定义如何用
fastadmin中写接口是时Validate规则验证自定义如何用
|
1月前
|
JavaScript 前端开发 数据安全/隐私保护
jQuery最方便的前端验证方式2种(非空验证与比较验证)
jQuery最方便的前端验证方式2种(非空验证与比较验证)
64 0
|
前端开发
怎么使用async-validator快速校验表单
怎么使用async-validator快速校验表单
361 0
如何对C4C UI上的手机号码字段加上自定义验证逻辑
如何对C4C UI上的手机号码字段加上自定义验证逻辑
114 0
如何对C4C UI上的手机号码字段加上自定义验证逻辑
【esayui】扩展验证方法,控件验证
基础验证 //页面调用方法$.extend($.fn.validatebox.defaults.rules, { 验证电话 IsPhoneRex: {validator: function (value) {var rex = /^1[3-8]+\d{9}$/;var rex2 = /^((0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$/;if (rex.
1009 0
|
数据安全/隐私保护 JavaScript 前端开发