在做B/S开发中,大家经常用到TextBox控件,而且经常需要对输入其中的数据进行合法性检查。
这种检查可以通过多种方式来实现。我喜欢用Javascript来检查。
但是,每一个控件都要用一段Javascript代码来检查,太麻烦,可以不可以来一下抽象呢?
我希望通过扩展TextBox来实现该控件数据合法性JavaSript的抽象。
思路:
1:扩展TextBox控件:
public class TextBoxEx : TextBox
2:添加属性
在类TextBoxEx中添加如下属性:
输入的数据类型,有int,double/float/decimal,是否允许为空,最大长度,最小长度。
下面是代码:
[Bindable(
true
),
Category(
"
是否必填
"
),
DefaultValue(
"
false
"
),
Description(
"
是否必填
"
)]
public
bool
IsNotNull;
[Bindable(
true
),
Category(
"
数据类型
"
),
DefaultValue(
"
string
"
),
Description(
"
数据类型
"
)]
public
string
TypeName;
[Bindable(
true
),
Category(
"
最小长度
"
),
DefaultValue(
"
0
"
),
Description(
"
最小长度
"
)]
public
int
MinValueLength;
[Bindable(
true
),
Category(
"
最大长度
"
),
DefaultValue(
"
0
"
),
Description(
"
最大长度
"
)]
public
int
MaxValueLength;
其实还可以扩展更多的属性,例如是否是邮件,是否是电话号码等。
3:重写Render:
1)判断控件的类型:
2)根据不同的控件类型和属性生成相应的Javascript方法。
以数据类型为string,不可以为空 ,最大长度为20来举例:
C#
if
(
this
.TypeName.ToLower().Equals(
"
string
"
))
{
js
=
"
IsStringForControl(this,'姓名',
"
+
this
.MaxValueLength
+
"
,
"
+
isNull
+
"
)
"
;
}
3)将生成的Javascript方法设置为TextBox控件的onblur事件【Javascript事件】。
举例:
ASPX代码:
<%
@ Register Assembly
=
"
DOTNET.Common
"
Namespace
=
"
DOTNET.Web
"
TagPrefix
=
"
cc1
"
%>
<
cc1:TextBoxEx
TypeName
="string"
IsNotNull
="true"
MaxValueLength
="20"
runat
="server"
/>
生成后的Javascript是:
<
input
onblur
="return IsStringForControl(this,'名称',20,false);"
/>
现在还有第四步:
添加IsStringForControl方法的实现代码:
可以写在js文件中:【假设js文件为“CheckData.js”】
//
//
检查整数控件值
//
control: 控件
//
cnname: 控件中文名
//
length: 最大长度
//
isNull: 是否允许为空
//
返回值: true. false
function
IsStringForControl(control, cnname, length, isNull)
{
//
出错操作: alert("“" + cnname + "”内容超过允许输入“" + length + "”长度!");
}
OK,现在我们只要写一些像
<
cc1:TextBoxEx
TypeName
="string"
IsNotNull
="true"
MaxValueLength
="20"
runat
="server"
/>
的代码,程序就会自动的检测数据的合法性了,是不是现在我们已经不怎么需要与Javascript打交道了?
【注意】:在ASPX中需要添加<script src="CheckData.js"></script>,作用如何相比一般大家都已知道。
再做扩展:
拿一个添加页面来说,一般会有很多个TextBox,点击提交的时候,会同意对所有TextBox进行检查,那我们如何来适应这种功能呢?
应对措施:
当用户点击提交按钮的时候,便利页面【或某一页面元素】的所有控件【或子控件】,判断该控件是否实现了onblur事件,如果实现了,则
执行该事件,如果返回false,则是数据验证不合法。