HTML控件和驗(yàn)證控件

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

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

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

4、件的類型 HTML 控件HtmlAnchorHtmlButtonHtmlFormHtmlImageHtmlInputButtonHtmlInputFileHtmlInputImageHtmlInputRadioButtonHtmlInputTextHtmlTable8HtmlForm 控件 2-1此控件是一種服務(wù)器控件，用于表示可作為容器容納 Web頁面中各種元素的窗體所有 HTML 控件和 Web 控件均置于 HTMLForm 控件內(nèi)HtmlForm 控件由以下標(biāo)簽表示：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=此按鈕為“清除”按鈕！;窗體的輸出結(jié)果10HtmlImage 控件 2-1此控件是用于顯示圖像的一種服務(wù)器端控件它可以動(dòng)態(tài)設(shè)置并獲取來源、寬度、高度、邊框?qū)挾?、備用文本和?duì)齊方式等各種

6、圖像屬性HtmlImage 控件由以下標(biāo)簽表示：img id=“id 名稱” alt=“替代文本 runat=server align=left/right/top/middle/bottom border=“邊框?qū)挾?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 頁面上載到服務(wù)器中此控件將顯示一個(gè)文本框和一個(gè)瀏覽按鈕，以便上載文件HtmlInputFile 控件由以下標(biāo)簽表示： 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 中的驗(yàn)證控件為使用戶更正輸入錯(cuò)誤或無效的數(shù)據(jù)，始終需要對(duì)用戶輸入的數(shù)據(jù)進(jìn)行檢查并顯示錯(cuò)誤消息驗(yàn)證將由在客戶端或服務(wù)器中運(yùn)行的驗(yàn)證代碼執(zhí)行ASP.NET 提供了許多驗(yàn)證控件，用以檢查輸入并使驗(yàn)證數(shù)據(jù)更加簡單方便與其他服務(wù)器控件一樣，驗(yàn)證控件也被添加在 ASP.NET 頁面中15ASP.NET 中的驗(yàn)證控件驗(yàn)證控件RequiredFieldValidatorCompareValidat

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

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

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

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

13、lidator 控件 2-1檢查窗體字段的值是否介于最小值與最大值之間最小值和最大值可以為日期、號(hào)碼、幣值或字符串選擇兩個(gè) RangeValidator 控件 ID 應(yīng)介于 1 與 100 之間旅行日期應(yīng)設(shè)于隨后 3 個(gè)月內(nèi)屬性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;將最小值設(shè)置為當(dāng)前日期將最大值設(shè)置為自當(dāng)前日期起的 3 個(gè)月如果輸入無任何錯(cuò)誤ID 未介于 1 與 100 之間輸入的日期已過期，而未在隨后三個(gè)月內(nèi)24正則表達(dá)式 2-1正則表達(dá)式用于進(jìn)行類型匹配正則表達(dá)式可使用文字文本逐字匹配它還可以使用元字符與復(fù)雜的字符序列相匹配以下為幾種常用的符號(hào)（更多的參見書本）符號(hào)含義字符串開始處$字符串結(jié)束a-z 是否是a-z中的一個(gè) w允許輸入任何值d3“d”指定輸入的值是一個(gè)數(shù)字, 表示已指定數(shù)據(jù)類型的出現(xiàn)次數(shù)+表明一個(gè)或多個(gè)元素將被添加到正在檢查的表達(dá)式25正則表達(dá)式 2-2例如：國內(nèi)電話號(hào)碼的表達(dá)式( (0d2,3)|0d2,3-)?d7,8(-d1

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

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

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

19、的屬性屬性值IDCusVal1ControlToValidatetxtPassDisplayDynamicText請(qǐng)輸入有效密碼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 代碼驗(yàn)證密碼字段如果用戶輸入的密碼正確31CustomValidator 控件 3-3如果輸入的密碼錯(cuò)誤，則顯示錯(cuò)誤消息輸入的密碼正確32屬性DisplayModeEnabledShowMessageBoxValidationSummary 控件 2-1顯示窗體中生成的所有錯(cuò)誤的摘要摘要可以按多種模式顯示：列表、項(xiàng)目列表或單獨(dú)一段將所有其他驗(yàn)證控件放入窗體在窗體中放入一個(gè) ValidationSummary 控件33ValidationSummary 控件 2-2屬性值IDValSumma