HTML控件和驗證控件

1、3.2 HTML 控件和驗證控件回顧在ASP.NET中，控件分成HTML服務控件和Web服務控件兩種所有的 ASP.NET Web 服務器控件都派生自 System.Web.UI.WebControls 命名空間使用Web服務器控件需要注意AutoPostBack的使用Web 服務器控件可以分為：文本輸入控件控制權轉移控件選擇控件容器控件其它專用控件2目標使用各種HTML控件理解HTML控件和Web控件的區(qū)別使用各種驗證控件3ASP.NET HTML 控件簡介HTML 服務器控件是由 ASP.NET 更新的標準 HTML 標簽，通過添加 runat=“server” 屬性將其用作服務器控件HT

2、ML標簽runat=serverHTML 服務器控件HTML 服務器控件屬于 System.Web.UI.HTMLControls 命名空間，派生自 HTMLControl 基類4HTML 控件與 Web 控件的區(qū)別 3-1HTML 控件比較靈活功能較少在客戶端運行窗體且不需用戶結合多種功能時使用4.可用來將 ASP 應用程序導入 ASP.NETWeb 控件具備多種控件編程功能包含大量控件在服務器端運行窗體時使用具備更加完善的功能來處理存儲在數(shù)據(jù)庫中的數(shù)據(jù)可在可視化設計環(huán)境中使用5往返過程： 瀏覽器向用戶顯示一個窗體，用戶與該窗體進行交互，這導致該窗體回發(fā)到服務器。但是，因為與服務器組件進行交

3、互的所有處理必須在服務器上發(fā)生，這意味著對于要求處理的每一操作而言，必須將該窗體發(fā)送到服務器、進行處理、然后返回到瀏覽器。 HTML 控件與 Web 控件的區(qū)別 3-26無狀態(tài)性： 客戶端向服務器發(fā)送一個請求（譬如你在IE欄輸入網(wǎng)址，回車），服務器接到請求，響應請求（處理事件），服務器完成處理后將生成的web頁發(fā)送回瀏覽器，然后就清除該頁的信息，釋放服務器資源。服務再等待下一次請求，即使下一次是請求同一頁，服務器重新開始創(chuàng)建和處理該頁。服務器就是這樣不停的重復這一過程。服務器不記錄頁面的狀態(tài)或信息的特性我們就稱之為“無狀態(tài)性”。 HTML 控件與 Web 控件的區(qū)別 3-37HTML 服務器控

4、件的類型 HTML 控件HtmlAnchorHtmlButtonHtmlFormHtmlImageHtmlInputButtonHtmlInputFileHtmlInputImageHtmlInputRadioButtonHtmlInputTextHtmlTable8HtmlForm 控件 2-1此控件是一種服務器控件，用于表示可作為容器容納 Web頁面中各種元素的窗體所有 HTML 控件和 Web 控件均置于 HTMLForm 控件內HtmlForm 控件由以下標簽表示：form id=“id 名稱 method=POST/GET action=“目的頁面的 URL runat=server

5、9用戶界面HtmlForm 控件 2-2private void btnSubmit_ServerClick(object sender, System.EventArgs e)lblSubmit.InnerHtml=此按鈕為“提交”按鈕！;private void btnClear_ServerClick(object sender, System.EventArgs e)lblClear.InnerHtml=此按鈕為“清除”按鈕！;窗體的輸出結果10HtmlImage 控件 2-1此控件是用于顯示圖像的一種服務器端控件它可以動態(tài)設置并獲取來源、寬度、高度、邊框寬度、備用文本和對齊方式等各種

6、圖像屬性HtmlImage 控件由以下標簽表示：img id=“id 名稱” alt=“替代文本 runat=server align=left/right/top/middle/bottom border=“邊框寬度 height=“圖像高度 src=“圖像 URL width=“圖像寬度11HtmlImage 控件 2-2private void btnChange_ServerClick(object sender, System.EventArgs e) if(int.Parse(ViewStateCount.ToString()%2=1) imgShow.Src=imagesflow

7、er.gif; else imgShow.Src=imagesfinger.gif; ViewStateCount=int.Parse(ViewStateCount.ToString()+1;12HtmlInputFile 控件 2-1此控件用于將文件從 ASP.NET 頁面上載到服務器中此控件將顯示一個文本框和一個瀏覽按鈕，以便上載文件HtmlInputFile 控件由以下標簽表示： 13HtmlInputFile 控件 2-2private void btnUpload_ServerClick(object sender, System.EventArgs e) string str; i

8、nt nLength=str()-1; str(str()+1, nLength); string strPath=Server.MapPath()+ Upload; (strPath+str);14ASP.NET 中的驗證控件為使用戶更正輸入錯誤或無效的數(shù)據(jù)，始終需要對用戶輸入的數(shù)據(jù)進行檢查并顯示錯誤消息驗證將由在客戶端或服務器中運行的驗證代碼執(zhí)行ASP.NET 提供了許多驗證控件，用以檢查輸入并使驗證數(shù)據(jù)更加簡單方便與其他服務器控件一樣，驗證控件也被添加在 ASP.NET 頁面中15ASP.NET 中的驗證控件驗證控件RequiredFieldValidatorCompareValidat

9、orRangeValidatorRegularExpressionValidatorCustomValidatorValidationSummary16RequiredFieldValidator控件 3-1此控件用于檢查任何窗體控件中是否包含值如果控件中不含任何值，則會生成錯誤消息提交窗體這些字段中是否有任何字段為空？方法Validate屬性ControlToValidateErrorMessageText17RequiredFieldValidator控件 3-2將所有控件放入窗體，同時應驗證姓名和年齡輸入是否為空從工具箱中選擇 RequiredFieldValidator 控件為每個文本

10、框置入一個 RequiredFieldValidator 控件，并按下一頁所示設置各個控件的屬性18RequiredFieldValidator控件 3-3屬性值IdRFV1ControlToValidatetxtNameText請輸入姓名！ForeColorRed屬性值IdRFV2ControlToValidatetxtAgeText*ErrorMessage請輸入年齡！ForeColorRed姓名字段中含有一個值，因此驗證后未顯示錯誤年齡字段為空，因此驗證后顯示錯誤消息19CompareValidator 控件 3-1將一個窗體字段中輸入的值與一個固定值或另一個控件中輸入的值進行比較，并檢

11、查值的類型檢查 ID 是否為數(shù)字檢查日期是否有效檢查截止日期是否遲于起始日期屬性ControlToCompareControlToValidateDisplayEnabledErrorMessageIsValidTextValueToCompare方法Validate選擇三個 CompareValidator 控件20CompareValidator 控件 3-2屬性值IDComVal1ControlToValidatetxtIdDisplayStaticTextID 無效ForeColorRedOperatorDataTypeCheckTypeInteger檢查 ID：檢查起始日期：檢查截止

12、日期：屬性值IDComVal2ControlToValidatetxtSdateDisplayStaticText日期有效ForeColorRedOperatorDataTypeCheckTypeDate屬性值IDComVal3ControlToComparetxtSdateControlToValidatetxtEdateDisplayStaticText截止日期應遲于起始日期ForeColorRedOperatorGreaterThanTypeInteger21CompareValidator 控件 3-3ID 應為整數(shù)值日期值無效ID 正確日期正確截止日期應遲于起始日期22RangeVa

13、lidator 控件 2-1檢查窗體字段的值是否介于最小值與最大值之間最小值和最大值可以為日期、號碼、幣值或字符串選擇兩個 RangeValidator 控件 ID 應介于 1 與 100 之間旅行日期應設于隨后 3 個月內屬性ControlToValidateDisplayEnabledErrorMessageIsValidMaximumValueMinimumValueText方法Validate23RangeValidator 控件 2-2private void Page_Load(object sender, System.EventArgs e) RangeVal2.Minimum

14、Value= Convert.ToString (System.DateTime.Now.ToShortDateString(); RangeVal2.MaximumValue= Convert.ToString (System.DateTime.Now.AddMonths(3).ToShortDateString();private void btnSubmit_Click(object sender, System.EventArgs e)if ( IsValid) lblMessage.Text = “您好” + txtId.Text + “ 你的旅行日期為： + txtJdate.Te

15、xt;將最小值設置為當前日期將最大值設置為自當前日期起的 3 個月如果輸入無任何錯誤ID 未介于 1 與 100 之間輸入的日期已過期，而未在隨后三個月內24正則表達式 2-1正則表達式用于進行類型匹配正則表達式可使用文字文本逐字匹配它還可以使用元字符與復雜的字符序列相匹配以下為幾種常用的符號（更多的參見書本）符號含義字符串開始處$字符串結束a-z 是否是a-z中的一個 w允許輸入任何值d3“d”指定輸入的值是一個數(shù)字, 表示已指定數(shù)據(jù)類型的出現(xiàn)次數(shù)+表明一個或多個元素將被添加到正在檢查的表達式25正則表達式 2-2例如：國內電話號碼的表達式( (0d2,3)|0d2,3-)?d7,8(-d1

16、,4)?解釋：(0d2,3)|0d2,3-)? ? 表示前面的出現(xiàn)0或1|表示或者，即(0d2,3)或者0d2,3- 也就是區(qū)號可以用(010)，(0871)，010-,0871- 表示；d7,8 表示 7位或者8位數(shù)字電話號碼(-d1,4)? ？表示出現(xiàn)0或1次，即1到4位分機號或者沒有分機號以下的都算滿足：12345678，1,-1234等。26RegularExpressionValidator控件3-1用于將在窗體字段中輸入的值與正則表達式進行匹配此控件通常與文本框控件一起使用，以檢查電子郵件 ID、電話號碼、信用卡號碼、用戶名和密碼等是否有效 屬性Contr

17、olToValidateDisplayEnabledErrorMessageIsValidTextValidationExpression方法Validate27RegularExpressionValidator控件3-2選擇三個 RegularExpressionValidator 控件姓名應介于 2 至 50 個字符之間應以有效的電子郵件格式填寫電子郵件地址，如 電話號碼應為 10 位數(shù)28RegularExpressionValidator控件3-3用來驗證姓名的控件的驗證表達式的值：w2-50用來驗證電子郵件的控件的驗證表達式的值：w+(-+.w+)*w+(-.w+)*.w+(-.w

18、+)*用來驗證電話號碼的控件的驗證表達式的值：0-910在字段中輸入的值與正則表達式不匹配29CustomValidator 控件 3-1按照用戶指定的標準進行驗證可在特定情況下無法使用任何標準驗證控件時使用通常用來驗證存儲在特定數(shù)據(jù)庫中的數(shù)據(jù)選擇并放置一個 CustomValidator 控件，以檢查用戶輸入的密碼 屬性ControlToValidateDisplayEnabledErrorMessageIsValidText方法OnServerValidateValidate事件ServerValidate30CustomValidator 控件 3-2CustomValidator 控件

19、的屬性屬性值IDCusVal1ControlToValidatetxtPassDisplayDynamicText請輸入有效密碼ForeColorRedprivate void CustomValidator1_ServerValidate(object source, System.Web.UI.WebControls.ServerValidateEventArgs args)strVal = args.Value.ToUpper();if ( strVal.Equals(ADMINISTRATOR) )args.IsValid = true;elseargs.IsValid = false

20、;private void btnLogin_Click(object sender,System.EventArgs e)if ( CusVal1.IsValid )lblMessage.Text = “恭喜！;觸發(fā) CustomValidator 控件的 ServerValidate 事件使用 CustomValidator 代碼驗證密碼字段如果用戶輸入的密碼正確31CustomValidator 控件 3-3如果輸入的密碼錯誤，則顯示錯誤消息輸入的密碼正確32屬性DisplayModeEnabledShowMessageBoxValidationSummary 控件 2-1顯示窗體中生成的所有錯誤的摘要摘要可以按多種模式顯示：列表、項目列表或單獨一段將所有其他驗證控件放入窗體在窗體中放入一個 ValidationSummary 控件33ValidationSummary 控件 2-2屬性值IDValSumma