TextBox 控件剖析[附源码]-控件新闻-慧都网

TextBox 控件剖析[附源码]

翻译|其它|编辑：郝浩|2007-08-13 11:47:29.000|阅读 865 次

概述：

下面是一张 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 SetValiateControls()
2 {
3
4     this.Controls.Add(tb);  向自定控件中加入tb(TextBox)控件
5
6     //当有要进行正则校验的设置时
7 if((RequiredFieldType!=null)&&(RequiredFieldType!="")&&(RequiredFieldType!="暂无校验"))
8 {
9         //设置显示信息方式为 "Dynamic"
10   RegularExpressionValidator1.Display=System.Web.UI.WebControls.ValidatorDisplay.Dynamic;
11   //将textbox与RegularExpressionValidator1校验控件相绑定
12   RegularExpressionValidator1.ControlToValidate=tb.ID;
13   //根据校验类型加载相应的正则式
14   switch (RequiredFieldType)
15    {
16    case "数据校验":
17     {
18        //如有用户定制的正则式则使用，如没有则使用系统自带的正则式
19        RegularExpressionValidator1.ValidationExpression=(this.ValidationExpression!=null)?
20        this.ValidationExpression:"^[-]?\\d+[.]?\\d*$";
21        //绑定错误信息
22        RegularExpressionValidator1.ErrorMessage="数字的格式不正确";break;
23    }
24
25
26   //是否可以不输入内容的判断
27   switch (CanBeNull)
28    {
29    case "可为空": { break;  }
30    case "必填":
31     {
32        //当必填时则进行 RequiredFieldValidator1的设置和 tb 的绑定
33        RequiredFieldValidator1.Display=System.Web.UI.WebControls.ValidatorDisplay.Dynamic;
34        RequiredFieldValidator1.ControlToValidate=tb.ID;
35        RequiredFieldValidator1.ErrorMessage="<font color=red>请务必输入内容!</font>";
36        this.Controls.Add(RequiredFieldValidator1);
37        break;
38    }
39    default : { break;  }
40   }
41
42     }
43
44

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

  1 SetFocusButtonID 属性用户当用户在 tb 控件中输入回车符时相应获得焦点的控件 ID(一般是“提交”按钮的 ID 值),
  2 相关代码如下：
  3     [Bindable(true),Category("Appearance"),DefaultValue("")]
  4 public string SetFocusButtonID
  5 {
  6      get
  7       {
  8    object o = ViewState[this.ClientID+"_SetFocusButtonID"];
  9    return (o==null)?"":o.ToString();
10      }
11   set
12    {
13    ViewState[this.ClientID+"_SetFocusButtonID"] = value;
14    if(value!="")
15     {
16     tb.Attributes.Add("onkeydown","if(event.keyCode==13){
17      document.getElementById('"+value+"').focus();}");
18    }
19   }
20 }
21
22
23     //为 tb 控件设置内容最大长度属性，注当为多行“MultiLink”(即：textarea)时，会使用 JS 得到获取该属性进行长度的检查
24     [Bindable(true),Category("Appearance"),DefaultValue("")]
25     public int MaxLength
26      {
27 get
28 {
29   object o =ViewState["TextBox_MaxLength"];
30   if(o!=null)
31    {
32    int maxlength= Convert.ToInt32(o.ToString());
33    AddAttributes("maxlength",maxlength.ToString());
34    return  maxlength;
35   }
36   else
37    {
38    return -1;
39   }
40 }
41 set
42 {
43   ViewState["TextBox_MaxLength"] = value;
44   AddAttributes("maxlength",value.ToString());
45 }
46    }
47
48
49    //控件的 TextMode 属性,用于定制显示模式为“密码，单行或多行”
50    [Bindable(false),Category("Behavior"),DefaultValue(""),TypeConverter(
51   typeof(TextModeFieldTypeControlsConverter)),Description("要滚动的对象。")]
52    public string TextMode
53     {
54 get
55 {
56   return tb.TextMode.ToString();
57 }
58 set
59 {
60   if (value=="Password")     tb.TextMode =TextBoxMode.Password;
61   if (value=="MultiLine")
62    {
63    tb.TextMode =TextBoxMode.MultiLine;
64    tb.Attributes.Add("onkeyup","return isMaxLen(this)");
65   }
66   if (value=="SingleLine")   tb.TextMode =TextBoxMode.SingleLine;
67 }
68    }
69
70    //设置校验类型, 并初始化控件绑定
71    [Bindable(false),Category("Behavior"),DefaultValue(""),TypeConverter(typeof(
72    RequiredFieldTypeControlsConverter)),Description("要滚动的对象。")]
73    public string RequiredFieldType  //要进行校验的表达式
74     {
75 get
76 {
77   object o =  ViewState["RequiredFieldType"];
78     return (o==null)?"":o.ToString();
79 }
80 set
81 {
82   ViewState["RequiredFieldType"] = value;
83   //初始化控件绑定,此处代码调用先后逻辑还存在一些问题，已在2.0版本做相应修正。
84   SetValiateControls();
85 }
86    }
87
88     .
89
90
91    //采用下拉框显示方式来显示校验类型，如图：
92    public class RequiredFieldTypeControlsConverter:StringConverter
93     {
94 public RequiredFieldTypeControlsConverter() {}
95
96 public override bool GetStandardValuesSupported(ITypeDescriptorContext context)
97 {
98   return true;
99 }
100
101 public override System.ComponentModel.TypeConverter.StandardValuesCollection GetStandardValues(
102    ITypeDescriptorContext context)
103 {
104   ArrayList controlsArray = new ArrayList();
105   controlsArray.Add("暂无校验");
106   controlsArray.Add("数据校验");
107   controlsArray.Add("电子邮箱");
108   controlsArray.Add("移动手机");
109   controlsArray.Add("家用电话");
110   controlsArray.Add("身份证号码");
111   controlsArray.Add("网页地址");
112   controlsArray.Add("日期");
113   controlsArray.Add("日期时间");
114   controlsArray.Add("金额");
115   controlsArray.Add("IP地址");
116   controlsArray.Add("IP地址带端口");
117   return new StandardValuesCollection(controlsArray);
118        }
119
120 public override bool GetStandardValuesExclusive(ITypeDescriptorContext context)
121 {
122   return false;
123 }
124    }
125
126
127
128

如图：

         这样就完成了这个控件的主干部分，而其它的一些属性，如 MaximumValue （最大值），MinimumValue（最小值）仅在进行数据
校验时有效。而 Text 属性中的日期格式强制转换主要为了避免不同语言操作系统，数据库日期格式不同才这样操作的。

         存在的问题：firefox 下的校验js无法使用。
         程序逻辑结构还有待优化。
         选项中出现中文，数据校验，电子邮箱等（以后会采用英文）

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