从以上代码可知TelNumValidator控件的实现是按照上文说明的验证控件实现步骤编写的该类实现了以下重要逻辑
()验证控件类TelNumValidator类从BaseValidator基类继承因此该类自动继承了通用验证控件应该具备的属性方法和事件
()定义用于获取或设置脚本相对路径的属性ClientFileUrl默认值为ClientFiles/通过该属性页面开发者可自定义客户端验证脚本文件的目录这样可增加控件的灵活性
()重写AddAttributesToRender方法为控件添加特性evaluationfunction和validationexp特性evaluationfunction对应的值是进行客户端验证的方法名特性validationexp对应的值是用于验证的正则表达式通过将其呈现到客户端那么客户端验证脚本即可使用该表达式
()重写EvaluateIsValid方法定义服务器端验证逻辑
()重写OnPreRender方法注册客户端脚本文件ClientValidatorjs
读者可能已经注意到该验证控件需要实现客户端验证而客户端验证包含在ClientValidatorjs文件中默认情况下该文件位于ClientFiles文件夹中
下面列出客户端验证文件ClientValidatorjs的源代码
function TelNumValidatorEvaluateIsValid(val)
{
var validationexp = valvalidationexp;
var valueToValidate = ValidateTrim(ValidateGetValue(ntroltovalidate));
var rx = new RegExp(validationexp);
var matches = rxexec(valueToValidate);
return (matches != null && valueToValidate == matches[]);
}
/* 获取验证目标控件的输入数据 */
function ValidateGetValue(id)
{
var control;
control = documentall[id];
if (typeof(controlvalue) == string)
{
return controlvalue;
}
if (typeof(controltagName) == undefined && typeof(controllength) == number)
{
var j;
for (j=; j < controllength; j++)
{
var inner = control[j];
if (typeof(innervalue) == string && (innertype != radio || innerstatus == true))
{
return innervalue;
}
}
}
else
{
return ValidatorGetValueRecursive(control);
}
return ;
}
/* 去除空格处理 */
function ValidateTrim(s)
{
var m = smatch(/^\s*(\S+(\s+\S+)*)\s*$/);
return (m == null) ? : m[];
}
由上代码可知ClientValidatiorjs文件中仅包括一个主方法TelNumValidatorEvaluateIsValid该方法实现了与服务器端验证中EvaluateIsValid方法相同的逻辑同时还包括两个辅助方法ValidateGetValue和ValidateTrim前者用于获取验证目标控件的输入数据后者用于去除空格处理
为了测试当前自定义验证控件下面列举了DefaultASPx页面源代码
<%@ Page Language=C# AutoEventWireup=true CodeFile=Defaultaspxcs Inherits=_Default %>
<%@ ReGISter TagPrefix=Sample Assembly=WebControlLibrary Namespace=WebControlLibrary %>
<!DOCTYPE html PUBLIC //WC//DTD XHTML Transitional//EN transitionaldtd>
<html XMLns=>
<head runat=server>
<title>实现一个验证控件</title>
</head>
<body>
<form id=form runat=server>
<div >
<asp:TextBox ID=textbox runat=server></asp:TextBox>
<asp:Button ID=Button runat=server Text=提交></asp:Button>
<Sample:TelNumValidator ID=demo runat=server Display=dynamic ControlToValidate=textbox Text=请输入有效的电话号码 ErrorMessage=正确的格式为或者></Sample:TelNumValidator>
<br /><br />
<asp:ValidationSummary runat=server ForeColor=blue DisplayMode=singleParagraph HeaderText=错误信息 ID=ValidationSummary></asp:ValidationSummary>
</div>
</form>
</body>
</html>
在以上实现中请读者重点关注自定义验证控件的属性设置该控件主要设置了以下几个重要属性
()ControlToValidate属性通过设置该属性从而实现了验证控件TelNumValidator和验证目标控件TextBox之间的关联
()Display属性通过设置该属性可设置错误信息显示方式
()ErrorMessage该属性用于获取或设置验证失败时ValidationSummary控件中显示的错误信息的文本为此在代码中还设置了一个对应的ValidationSummary控件
()Text该属性用于获取或设置验证失败时验证控件中显示的文本
需要注意的是以上个属性都继承自BaseValidator基类另外如果应用程序部署需要开发人员还可以修改验证控件的ClientFileUrl属性
小结
本文通过一个典型示例说明了验证控件的实现方法相信读者已经能够感到如果实现高质量的验证控件开发人员必须掌握多方面的知识尤其是JavaScript语言等另外本文所涉及的JavaScript代码被包含在js文件中开发人员也可以将这些代码作为资源文件编译到验证控件的dll文件中这种实现方法非常有利于控件的部署工作有兴趣的读者可以试一试