内容载入中...
读者可能已经注意到该验证控件需要实现客户端验证，而客户端验证包含在ClientValidator.js文件中。默认情况下，该文件位于“ClientFiles”文件夹中。
下面列出客户端验证文件ClientValidator.js的源代码。
function TelNumValidatorEvaluateIsValid(val)
{
var validationexp = val.validationexp;
var valueToValidate = ValidateTrim(ValidateGetValue(val.controltovalidate));
var rx = new RegExp(validationexp);
var matches = rx.exec(valueToValidate);
return (matches != null && valueToValidate == matches[0]);
}
/* 获取验证目标控件的输入数据 */
function ValidateGetValue(id)
{
var control;
control = document.all[id];
if (typeof(control.value) == "string")
{
return control.value;
}
if (typeof(control.tagName) == "undefined" && typeof(control.length) == "number")
{
var j;
for (j=0; j ＜ control.length; j++)
{
var inner = control[j];
if (typeof(inner.value) == "string" && (inner.type != "radio" || inner.status == true))
{
return inner.value;
}
}
}
else
{
return ValidatorGetValueRecursive(control);
}
return "";
}
/* 去除空格处理 */
function ValidateTrim(s)
{
var m = s.match(/^\s*(\S+(\s+\S+)*)\s*$/);
return (m == null) ? "" : m[1];
}
由上代码可知，ClientValidatior.js文件中仅包括一个主方法TelNumValidatorEvaluateIsValid。该方法实现了与服务器端验证中，EvaluateIsValid方法相同的逻辑。同时，还包括两个辅助方法ValidateGetValue和ValidateTrim。前者用于获取验证目标控件的输入数据，后者用于去除空格处理。
为了测试当前自定义验证控件，下面列举了Default.ASPx页面源代码。
＜%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.ASPx.cs" Inherits="_Default" %＞
＜%@ ReGISter TagPrefix="Sample" Assembly="WebControlLibrary" Namespace="WebControlLibrary" %＞
＜!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xHTML1/DTD/xHTML1-transitional.dtd"＞
＜HTML XMLns="http://www.w3.org/1999/xHTML"＞
＜head runat="server"＞
＜title＞实现一个验证控件＜/title＞
＜/head＞
＜body＞
＜form id="form1" runat="server"＞
＜div style="font-size: small;"＞
＜ASP:TextBox ID="textbox" runat="server"＞＜/ASP:TextBox＞
＜ASP:Button ID="Button1" runat="server" Text="提交"＞＜/ASP:Button＞
＜Sample:TelNumValidator ID="demo1" runat="server" Display="dynamic" ControlToValidate="textbox" Text="请输入有效的电话号码" ErrorMessage="正确的格式为010-12345678或者0123-1234567"＞＜/Sample:TelNumValidator＞
＜br /＞＜br /＞
＜ASP:ValidationSummary runat="server" ForeColor="blue" DisplayMode="singleParagraph" HeaderText="错误信息：" ID="ValidationSummary1"＞＜/ASP:ValidationSummary＞
＜/div＞
＜/form＞
＜/body＞
＜/HTML＞
在以上实现中，请读者重点关注自定义验证控件的属性设置。该控件主要设置了以下几个重要属性。
（1）ControlToValidate属性，通过设置该属性，从而实现了验证控件TelNumValidator和验证目标控件TextBox之间的关联。
（2）Display属性，通过设置该属性可设置错误信息显示方式。
（3）ErrorMessage，该属性用于获取或设置验证失败时ValidationSummary控件中显示的错误信息的文本。为此，在代码中还设置了一个对应的ValidationSummary控件。
（4）Text，该属性用于获取或设置验证失败时验证控件中显示的文本。
需要注意的是以上4个属性都继承自BaseValidator基类。另外，如果应用程序部署需要，开发人员还可以修改验证控件的ClientFileUrl属性。
3. 小结
本文通过一个典型示例说明了验证控件的实现方法。相信读者已经能够感到，如果实现高质量的验证控件，开发人员必须掌握多方面的知识，尤其是JavaScript语言等。另外，本文所涉及的JavaScript代码被包含在js文件中。开发人员也可以将这些代码作为资源文件编译到验证控件的dll文件中。这种实现方法非常有利于控件的部署工作。有兴趣的读者可以试一试。
。
