ASP.NET 2.0服務器控件之驗證控件示例

　　在上一篇文章中我們講解了有關實現驗證控件的一些知識那些內容將為開發人員實現驗證控件奠定一定基礎為了幫助讀者更好的理解驗證控件的實現方法本文將首先介紹常見驗證控件的實現步驟然後通過一個典型示例說明驗證控件的實現方法
  
  　　 驗證控件實現步驟
  
  　　在創建驗證控件過程中需要實現服務器端驗證和客戶端驗證等核心內容下面列舉了驗證控件的常見實現步驟
  
  　　（）驗證控件類應由BaseValidator基類繼承這樣可使驗證控件自動繼承參與驗證框架所需要的功能例如通過繼承BaseValidator的ControlToValidate屬性實現驗證控件與驗證目標控件的關聯
  
  　　（）實現驗證控件所特有的一些屬性開發人員可根據應用需求從方便實用的角度出發定義這些特有屬性
  
  　　（）重寫AddAttributesToRender方法將特有屬性及相關內容添加到控件呈現中當實現客戶端驗證代碼時可能需要引用相關呈現內容
  
  　　（）重寫EvaluateIsValid方法為驗證控件添加服務器端驗證邏輯
  
  　　（）重寫PreRender事件的事件處理方法OnPreRender除調用基類實現方法外還要實現對客戶端驗證腳本文件的注冊
  
  　　（）編寫與驗證控件一起打包的客戶端驗證腳本文件並且將其放置到正確的目錄中
  
  　　通過以上的一個或者幾個步驟開發人員就可以實現一個基本的驗證控件在實現過程中服務器端驗證邏輯和客戶端驗證邏輯必須保持一致否則即使輸入數據通過了客戶端驗證也無法通過服務器端驗證下面將通過一個典型實例來進一步說明驗證控件的實現方法以加深讀者的理解
  
  　　典型應用
  
  　　本節將使用上文所介紹的開發驗證控件的方法創建一個名為TelNumValidator的驗證控件該控件用於驗證用戶輸入的電話號碼是否符合規則如果不符合規則那麼動態提示錯誤信息其效果如圖
  

　　

　　圖 效果圖（輸入錯誤狀態下）

　　如圖所示頁面中主要包括了一個TextBox文本框和一個提交按鈕用戶必須輸入正確格式的電話號碼才能夠通過驗證圖中由於沒有輸入正確的電話號碼當單擊提交按鈕時則無法實現提交頁面同時頁面還分紅藍兩種顏色給出了提示信息下文詳細講解了驗證控件的實現過程
  
  　　首先在實現TelNumValidator控件之前必須進一步明確驗證條件
  
  　　對於國內電話號碼一般為兩種模式一種是區號為位電話號碼為位另一種是區號為位電話號碼為位據此可得出用於驗證的正則表達式\d{}\d{}|\d{}\d{}無論是服務器端驗證邏輯還是客戶端驗證邏輯都必須遵從以上驗證條件只有符合這兩種模式的輸入數據才能夠通過驗證
  
  　　下面列出了驗證控件TelNumValidator的服務器端驗證的源代碼
  
  using System;
  using SystemCollectionsGeneric;
  using SystemComponentModel;
  using SystemText;
  using SystemWeb;
  using SystemWebUI;
  using SystemWebUIWebControls;
  using SystemTextRegularExpressions;
  
  namespace WebControlLibrary
  {
  　[DefaultProperty(Text)]
  　[ToolboxData(＜{}:TelNumValidator runat=server＞
  　　＜/{}:TelNumValidator＞)
  　]
  
  　public class TelNumValidator : BaseValidator
  　{
  　　// 定義私有變量其中_clientFileUrl表示JavaScript文件存儲目錄
  　　// ValidationExpression表示正則表達式
  
  　　private string _clientFileUrl = ClientFiles/;
  　　private const string ValidationExpression = @(\d{}\d{}|\d{}\d{});
  　　// 定義屬性ClientFileUrl用於獲取或設置腳本相對路徑
  　　[
  　　　Description(獲取或設置腳本相對路徑)
  　　　DefaultValue(ClientFiles/)
  　　　Category(Appearance)
  　　]
  
  　　public string ClientFileUrl
  　　{
  　　　get
  　　　{ return _clientFileUrl; }
  　　　set　
  　　　{ _clientFileUrl = value; }
  　　}
  　　//重寫AddAttributesToRender為驗證控件添加特殊屬性evaluationfunction和validationexp
  　　protected override void AddAttributesToRender(HtmlTextWriter writer)
  　　{
  　　　baseAddAttributesToRender(writer);
  　　　if (RenderUplevel)
  　　　{
  　　　　writerAddAttribute(evaluationfunction TelNumValidatorEvaluateIsValid false);
  　　　　writerAddAttribute(validationexp ValidationExpression);
  　　　}
  　　}
  　　//重寫EvaluateIsValid方法定義服務器端驗證邏輯
  　　protected override bool EvaluateIsValid()
  　　string controlValue = GetControlValidationValue(ControlToValidate);
  　　if (controlValue == null)
  　　{
  　　　return true;
  　　}
  　　controlValue = controlValueTrim();
  　　try
  　　{
  　　　Match m = RegexMatch(controlValue ValidationExpression);
  　　　return (mSuccess && (mIndex == ) && (mLength == controlValueLength));
  　　}
  　　catch
  　　{
  　　　return false;
  　　}
  　}
  　//重寫OnPreRender方法注冊客戶端腳本程序
  　protected override void OnPreRender(EventArgs e)
  　{
  　　baseOnPreRender(e);
  　　if (RenderUplevel)
  　　{PageClientScriptReGISterClientScriptBlock ( typeof(TelNumValidator)
  　　　 ClientValidator GetClientFileUrl ( ClientValidatorjs ));
  　　}
  　}
  
  　// 實現輔助函數GetClientFileUrl用於獲取JavaScript文件的完整路徑
  
  　private string GetClientFileUrl(string fileName)
  　{
  　　string tempClient = StringFormat(＜script language=\javascript\ src=\{}\＞＜/script＞ (ClientFileUrl + fileName));
  　　return tempClient;
  　}
  }
  

　　[NextPage]

　　從以上代碼可知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文件中這種實現方法非常有利於控件的部署工作有興趣的讀者可以試一試

From:http://tw.wingwit.com/Article/program/net/201311/11616.html