ASP.NET 2.0服务器控件之验证控件示例

读者可能已经注意到该验证控件需要实现客户端验证，而客户端验证包含在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文件中。这种实现方法非常有利于控件的部署工作。有兴趣的读者可以试一试。

查看本文来源