Discuz!NT控件剖析 之 TextBox [原创: 附源码]

本文介绍了一款自定义TextBox控件的设计与实现过程,包括客户端JS校验、正则表达式验证、最大长度限制等功能,并附有示例代码。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

         继上篇文章之后(http://www.cnblogs.com/daizhj/archive/2007/08/02/840607.html),大家给了不少的反馈,其中有肯定也有否定的,必
定程序设计有很多个性化的东西,因此就会有不同的意见产生。我会从中找出合理化的意见并纠正以往认识和设计思路上的错误。希望大
家能一如既往的支持我们的这个开源项目。

        好了,开始今天的话题,今天就说一下 TextBox 控件。
   
        先贴一张运行效果图让大家看一下:

     

         开发动机:早在上一家公司时,就有了这个控件的开发想法并设计了一个简单的“原型”。在加
入Discuz之后,因为要在后台管理设计用使用客户端JS校验,因此就在原有的代码基本上进行了相应
的扩充,添加了如正规订制,最大长度限制等功能。当前的这个代码是1.0版本中的源码。
         其实看过我们这个代码的人应该很容易看出这个控件是采用控件复合方式完成的。里面的几个控
件定义如下:

System.Web.UI.WebControls.TextBox tb=new System.Web.UI.WebControls.TextBox(); 
System.Web.UI.WebControls.RequiredFieldValidator RequiredFieldValidator1=new RequiredFieldValidator();
System.Web.UI.WebControls.RegularExpressionValidator RegularExpressionValidator1=new RegularExpressionValidator();
System.Web.UI.WebControls.RangeValidator rangevalidator=new System.Web.UI.WebControls.RangeValidator();


         其中的tb就是这个控件的主角,客户端所呈现的文件框就是它, RequiredFieldValidator1用户
是否强制输入内容的控件(与tb进行绑定),而RegularExpressionValidator1则是将系统正则式或
用户定制的正则式进行初始化并与tb进行绑定和控制的控件。rangevalidator则是进行范围限制的控件。

         它们绑定的函数就是SetValiateControls(),现说明如下:

 1 None.gif SetValiateControls()
 2 ExpandedBlockStart.gifContractedBlock.gif dot.gif {
 3InBlock.gif     
 4InBlock.gif    this.Controls.Add(tb);  向自定控件中加入tb(TextBox)控件
 5InBlock.gif        
 6InBlock.gif    //当有要进行正则校验的设置时
 7InBlock.gif if((RequiredFieldType!=null)&&(RequiredFieldType!="")&&(RequiredFieldType!="暂无校验"))
 8ExpandedSubBlockStart.gifContractedSubBlock.gif dot.gif{
 9InBlock.gif        //设置显示信息方式为 "Dynamic"
10InBlock.gif  RegularExpressionValidator1.Display=System.Web.UI.WebControls.ValidatorDisplay.Dynamic;
11InBlock.gif  //将textbox与RegularExpressionValidator1校验控件相绑定
12InBlock.gif  RegularExpressionValidator1.ControlToValidate=tb.ID;
13InBlock.gif  //根据校验类型加载相应的正则式
14InBlock.gif  switch (RequiredFieldType)
15ExpandedSubBlockStart.gifContractedSubBlock.gif  dot.gif{
16InBlock.gif   case "数据校验":
17ExpandedSubBlockStart.gifContractedSubBlock.gif   dot.gif{
18InBlock.gif       //如有用户定制的正则式则使用,如没有则使用系统自带的正则式
19InBlock.gif       RegularExpressionValidator1.ValidationExpression=(this.ValidationExpression!=null)?
20InBlock.gif       this.ValidationExpression:"^[-]?\\d+[.]?\\d*$";
21InBlock.gif       //绑定错误信息
22InBlock.gif       RegularExpressionValidator1.ErrorMessage="数字的格式不正确";break
23ExpandedSubBlockEnd.gif   }

24InBlock.gif   dot.gifdot.gif
25InBlock.gif  
26InBlock.gif  //是否可以不输入内容的判断
27InBlock.gif  switch (CanBeNull)
28ExpandedSubBlockStart.gifContractedSubBlock.gif  dot.gif{
29ExpandedSubBlockStart.gifContractedSubBlock.gif   case "可为空"dot.gifbreak;  }
30InBlock.gif   case "必填":
31ExpandedSubBlockStart.gifContractedSubBlock.gif   dot.gif{
32InBlock.gif       //当必填时则进行RequiredFieldValidator1的设置和tb的绑定
33InBlock.gif       RequiredFieldValidator1.Display=System.Web.UI.WebControls.ValidatorDisplay.Dynamic;
34InBlock.gif       RequiredFieldValidator1.ControlToValidate=tb.ID;
35InBlock.gif       RequiredFieldValidator1.ErrorMessage="<font color=red>请务必输入内容!</font>";
36InBlock.gif       this.Controls.Add(RequiredFieldValidator1);
37InBlock.gif       break
38ExpandedSubBlockEnd.gif   }

39ExpandedSubBlockStart.gifContractedSubBlock.gif   default : dot.gifbreak;  }
40ExpandedSubBlockEnd.gif  }

41InBlock.gif  dot.gifdot.gif
42ExpandedSubBlockEnd.gif    }

43InBlock.gif    
44InBlock.gif

    
         下面依次说明其它主要属性和功能:
    
    

  1 None.gif SetFocusButtonID属性用户当用户在tb控件中输入回车符时相应获得焦点的控件ID(一般是“提交”按钮的ID值),
  2 None.gif相关代码如下:
  3 None.gif    [Bindable( true ),Category( " Appearance " ),DefaultValue( "" )] 
  4 None.gif  public   string  SetFocusButtonID
  5 ExpandedBlockStart.gifContractedBlock.gif  dot.gif {
  6InBlock.gif     get
  7ExpandedSubBlockStart.gifContractedSubBlock.gif     dot.gif{
  8InBlock.gif   object o = ViewState[this.ClientID+"_SetFocusButtonID"];
  9InBlock.gif   return (o==null)?"":o.ToString(); 
 10ExpandedSubBlockEnd.gif     }

 11InBlock.gif  set
 12ExpandedSubBlockStart.gifContractedSubBlock.gif  dot.gif{
 13InBlock.gif   ViewState[this.ClientID+"_SetFocusButtonID"= value;
 14InBlock.gif   if(value!="")
 15ExpandedSubBlockStart.gifContractedSubBlock.gif   dot.gif{
 16InBlock.gif    tb.Attributes.Add("onkeydown","if(event.keyCode==13){
 17ExpandedSubBlockEnd.gif     document.getElementById('"+value+"').focus();}
");
 18ExpandedSubBlockEnd.gif   }

 19ExpandedBlockEnd.gif  }

 20 None.gif }   
 21 None.gif 
 22 None.gif 
 23 None.gif     // 为tb控件设置内容最大长度属性,注当为多行“MultiLink”(即:textarea)时,会使用JS得到获取该属性进行长度的检查
 24 None.gif     [Bindable( true ),Category( " Appearance " ),DefaultValue( "" )] 
 25 None.gif     public   int  MaxLength
 26 ExpandedBlockStart.gifContractedBlock.gif     dot.gif {   
 27InBlock.gif get 
 28ExpandedSubBlockStart.gifContractedSubBlock.gif dot.gif
 29InBlock.gif  object o =ViewState["TextBox_MaxLength"]; 
 30InBlock.gif  if(o!=null)
 31ExpandedSubBlockStart.gifContractedSubBlock.gif  dot.gif{
 32InBlock.gif   int maxlength= Convert.ToInt32(o.ToString()); 
 33InBlock.gif   AddAttributes("maxlength",maxlength.ToString());
 34InBlock.gif   return  maxlength;
 35ExpandedSubBlockEnd.gif  }

 36InBlock.gif  else
 37ExpandedSubBlockStart.gifContractedSubBlock.gif  dot.gif{
 38InBlock.gif   return -1;
 39ExpandedSubBlockEnd.gif  }

 40ExpandedSubBlockEnd.gif }
 
 41InBlock.gif set 
 42ExpandedSubBlockStart.gifContractedSubBlock.gif dot.gif
 43InBlock.gif  ViewState["TextBox_MaxLength"= value; 
 44InBlock.gif  AddAttributes("maxlength",value.ToString());
 45ExpandedSubBlockEnd.gif }
 
 46ExpandedBlockEnd.gif   }

 47 None.gif 
 48 None.gif 
 49 None.gif    // 控件的TextMode属性,用于定制显示模式为“密码,单行或多行”
 50 None.gif    [Bindable( false ),Category( " Behavior " ),DefaultValue( "" ),TypeConverter(
 51 None.gif   typeof (TextModeFieldTypeControlsConverter)),Description( " 要滚动的对象。 " )] 
 52 None.gif    public   string  TextMode  
 53 ExpandedBlockStart.gifContractedBlock.gif    dot.gif
 54InBlock.gif get
 55ExpandedSubBlockStart.gifContractedSubBlock.gif dot.gif{
 56InBlock.gif  return tb.TextMode.ToString();
 57ExpandedSubBlockEnd.gif }

 58InBlock.gif set
 59ExpandedSubBlockStart.gifContractedSubBlock.gif dot.gif{
 60InBlock.gif  if (value=="Password")     tb.TextMode =TextBoxMode.Password;
 61InBlock.gif  if (value=="MultiLine"
 62ExpandedSubBlockStart.gifContractedSubBlock.gif  dot.gif{
 63InBlock.gif   tb.TextMode =TextBoxMode.MultiLine;
 64InBlock.gif   tb.Attributes.Add("onkeyup","return isMaxLen(this)");
 65ExpandedSubBlockEnd.gif  }

 66InBlock.gif  if (value=="SingleLine")   tb.TextMode =TextBoxMode.SingleLine;
 67ExpandedSubBlockEnd.gif }

 68ExpandedBlockEnd.gif   }

 69 None.gif 
 70 None.gif    // 设置校验类型, 并初始化控件绑定
 71 None.gif    [Bindable( false ),Category( " Behavior " ),DefaultValue( "" ),TypeConverter( typeof (
 72 None.gif   RequiredFieldTypeControlsConverter)),Description( " 要滚动的对象。 " )] 
 73 None.gif    public   string  RequiredFieldType   // 要进行校验的表达式
 74 ExpandedBlockStart.gifContractedBlock.gif     dot.gif
 75InBlock.gif get 
 76ExpandedSubBlockStart.gifContractedSubBlock.gif dot.gif
 77InBlock.gif  object o =  ViewState["RequiredFieldType"]; 
 78InBlock.gif    return (o==null)?"":o.ToString(); 
 79ExpandedSubBlockEnd.gif }
 
 80InBlock.gif set 
 81ExpandedSubBlockStart.gifContractedSubBlock.gif dot.gif
 82InBlock.gif  ViewState["RequiredFieldType"= value; 
 83InBlock.gif  //初始化控件绑定,此处代码调用先后逻辑还存在一些问题,已在2.0版本做相应修正。
 84InBlock.gif  SetValiateControls(); 
 85ExpandedSubBlockEnd.gif }
 
 86ExpandedBlockEnd.gif   }
 
 87 None.gif 
 88 None.gif   dot.gifdot.gif.
 89 None.gif 
 90 None.gif 
 91 None.gif    // 采用下拉框显示方式来显示校验类型,如图:
 92 None.gif     public   class  RequiredFieldTypeControlsConverter:StringConverter
 93 ExpandedBlockStart.gifContractedBlock.gif    dot.gif {
 94ExpandedSubBlockStart.gifContractedSubBlock.gif public RequiredFieldTypeControlsConverter() dot.gif{}
 95InBlock.gif
 96InBlock.gif public override bool GetStandardValuesSupported(ITypeDescriptorContext context) 
 97ExpandedSubBlockStart.gifContractedSubBlock.gif dot.gif
 98InBlock.gif  return true
 99ExpandedSubBlockEnd.gif }
 
100InBlock.gif
101InBlock.gif public override System.ComponentModel.TypeConverter.StandardValuesCollection GetStandardValues(
102InBlock.gif   ITypeDescriptorContext context) 
103ExpandedSubBlockStart.gifContractedSubBlock.gif dot.gif
104InBlock.gif  ArrayList controlsArray = new ArrayList(); 
105InBlock.gif  controlsArray.Add("暂无校验"); 
106InBlock.gif  controlsArray.Add("数据校验");
107InBlock.gif  controlsArray.Add("电子邮箱");
108InBlock.gif  controlsArray.Add("移动手机"); 
109InBlock.gif  controlsArray.Add("家用电话"); 
110InBlock.gif  controlsArray.Add("身份证号码"); 
111InBlock.gif  controlsArray.Add("网页地址"); 
112InBlock.gif  controlsArray.Add("日期"); 
113InBlock.gif  controlsArray.Add("日期时间"); 
114InBlock.gif  controlsArray.Add("金额"); 
115InBlock.gif  controlsArray.Add("IP地址"); 
116InBlock.gif  controlsArray.Add("IP地址带端口"); 
117InBlock.gif  return new StandardValuesCollection(controlsArray); 
118ExpandedSubBlockEnd.gif       }
 
119InBlock.gif  
120InBlock.gif public override bool GetStandardValuesExclusive(ITypeDescriptorContext context) 
121ExpandedSubBlockStart.gifContractedSubBlock.gif dot.gif
122InBlock.gif  return false
123ExpandedSubBlockEnd.gif }
 
124ExpandedBlockEnd.gif   }

125 None.gif   dot.gifdot.gif
126 None.gif 
127 None.gif
128 None.gif

        上图:        
       

         这样就完成了这个控件的主干部分,而其它的一些属性,如MaximumValue(最大值),MinimumValue(最小值)仅在进行数据
校验时有效。而Text属性中的日期格式强制转换主要为了避免不同语言操作系统,数据库日期格式不同才这样操作的。
 
 
         存在的问题:firefox 下的校验js无法使用。
         程序逻辑结构还有待优化。
         选项中出现中文,数据校验,电子邮箱等(以后会采用英文)

         如果ie下 js 无法使用可运行“开始” - “运行” -- 输入“cmd” 然后执行
        C:/windows/Microsoft.Net/Framework/v1.1.4322/aspnet_regiis -c  即可

        下载地址:/Files/daizhj/TextBox_ControlsTest.rar

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值