應(yīng)用驗(yàn)證控件講義課件

項(xiàng)目四應(yīng)用驗(yàn)證控件

任務(wù)一完成注冊界面的設(shè)計(jì)項(xiàng)目四應(yīng)用驗(yàn)證控件任務(wù)一完成注冊界面的設(shè)計(jì)任務(wù)一完成注冊界面的設(shè)計(jì)【任務(wù)要點(diǎn)】常用驗(yàn)證服務(wù)器控件的使用【案例1】制作提交內(nèi)容必填的注冊頁面某網(wǎng)頁要求學(xué)生提交學(xué)號和專業(yè)，要求兩項(xiàng)內(nèi)容必填。若用戶沒有在文本框中輸入學(xué)號或沒有通過下拉列表框選擇專業(yè)，則顯示出錯提示，顯示圖4-1所示的Web頁面，程序正常運(yùn)行時顯示圖4-2所示的結(jié)果。下一頁返回任務(wù)一完成注冊界面的設(shè)計(jì)【任務(wù)要點(diǎn)】下一頁返回任務(wù)一完成注冊界面的設(shè)計(jì)【具體步驟】1.設(shè)計(jì)Web頁面新建一個ASP.NET網(wǎng)站，向頁面中添加必要的控件說明文字，添加一個按鈕控件Button1；一個文本框控件TextBox1；一個下拉列表框控件DropDownList1和兩個必須項(xiàng)驗(yàn)證控件RequiredFieldValidator1、RequiredFieldValidator2，注意將驗(yàn)證控件放置在被驗(yàn)證控件的右側(cè)。2.設(shè)置對象屬性Web頁面中各控件的初始屬性設(shè)置，見表4-1。下一頁返回上一頁任務(wù)一完成注冊界面的設(shè)計(jì)【具體步驟】下一頁返回上一頁任務(wù)一完成注冊界面的設(shè)計(jì)Web頁面加載時執(zhí)行的事件過程代碼如下：protectedvoidPage_Load(objectsender,EventArgse){dropSpec.Items.Add("--請選擇專業(yè)--");//填充專業(yè)下拉列表框中的選項(xiàng)dropSpec.Items.Add("網(wǎng)絡(luò)技術(shù)");dropSpec.Items.Add("軟件工程");dropSpec.Items.Add("多媒體應(yīng)用");dropSpec.Items.Add("計(jì)算機(jī)維修");this.Title="必須項(xiàng)驗(yàn)證控件應(yīng)用示例";//設(shè)置頁面標(biāo)題}下一頁返回上一頁任務(wù)一完成注冊界面的設(shè)計(jì)Web頁面加載時執(zhí)行的事件過程代碼如任務(wù)一完成注冊界面的設(shè)計(jì)單擊【提交】按鈕時執(zhí)行的事件過程代碼如下：protectedvoidbtnOK_Click(objectsender,EventArgse){//將用戶的選擇顯示到標(biāo)簽控件中l(wèi)blResult.Text="你的學(xué)號是："+txtNum.Text+"<br>"+"你的專業(yè)是："+dropSpec.Text;}下一頁返回上一頁任務(wù)一完成注冊界面的設(shè)計(jì)單擊【提交】按鈕時執(zhí)行的事件過程代碼任務(wù)一完成注冊界面的設(shè)計(jì)【案例2】利用比較驗(yàn)證控件來制作注冊頁面設(shè)計(jì)一個模擬的用戶注冊頁面，要求使用比較驗(yàn)證控件（CompareValidator）對用戶輸入密碼和確認(rèn)密碼的一致性、日期數(shù)據(jù)格式的正確性進(jìn)行比較驗(yàn)證，使用必須項(xiàng)驗(yàn)證控件（RequiredFieldValidator）設(shè)置用戶名及密碼為必填字段。程序運(yùn)行結(jié)果如圖4-3和圖4-4所示。下一頁返回上一頁任務(wù)一完成注冊界面的設(shè)計(jì)【案例2】利用比較驗(yàn)證控件來制作注冊任務(wù)一完成注冊界面的設(shè)計(jì)【具體步驟】1.設(shè)計(jì)Web頁面新建一個ASP.NET網(wǎng)站，切換到設(shè)計(jì)視圖。向由系統(tǒng)自動創(chuàng)建的Default.aspx頁面中添加一個用于布局的HTML表格，適當(dāng)調(diào)整表格的行列數(shù)；向表格中添加必要的控件說明文字；添加四個用于接收用戶輸入數(shù)據(jù)的文本框TextBox1～TextBox4；兩個按鈕控件Button1、Button2；一個用于顯示通過驗(yàn)證信息的標(biāo)簽控件Label1；添加兩個必須項(xiàng)驗(yàn)證控件RequiredFieldValidator1和RequiredFieldValidator2，兩個比較驗(yàn)證控件CompareValidator1、CompareValidator2，注意將必須項(xiàng)驗(yàn)證控件分別放置在用戶名欄和密碼欄的右側(cè)單元格，將比較驗(yàn)證控件分別放置在確認(rèn)密碼和出生日期欄的右側(cè)單元格；適當(dāng)調(diào)整各控件的大小及位置。下一頁返回上一頁任務(wù)一完成注冊界面的設(shè)計(jì)【具體步驟】下一頁返回上一頁任務(wù)一完成注冊界面的設(shè)計(jì)2.設(shè)置對象屬性各控件的初始屬性設(shè)置見表4-2。3.編寫事件代碼protectedvoidPage_Load(objectsender,EventArgse){this.Title="CompareValidator控件應(yīng)用示例";txtUsername.Focus();//頁面加載時，用戶名文本框得到焦點(diǎn)lblPass.Text="";//清除通過驗(yàn)證標(biāo)簽中的文本}protectedvoidbtnOK_Click(objectsender,EventArgse){lblPass.Text="本頁已通過驗(yàn)證！";//通過驗(yàn)證后在標(biāo)簽中顯示的信息}下一頁返回上一頁任務(wù)一完成注冊界面的設(shè)計(jì)2.設(shè)置對象屬性下一頁返回上一頁任務(wù)一完成注冊界面的設(shè)計(jì)【案例3】利用范圍驗(yàn)證控件來制作數(shù)值錄入頁面使用RangeValidator控件驗(yàn)證用戶輸入學(xué)生成績的數(shù)值范圍，用戶輸入數(shù)據(jù)被驗(yàn)證通過時頁面中顯示如圖4-5所示的結(jié)果。若用戶沒有輸入學(xué)號或輸入了不合邏輯的成績值，則顯示如圖4-6所示的出錯提示信息。下一頁返回上一頁任務(wù)一完成注冊界面的設(shè)計(jì)【案例3】利用范圍驗(yàn)證控件來制作數(shù)值任務(wù)一完成注冊界面的設(shè)計(jì)【具體步驟】1.設(shè)計(jì)Web頁面新建一個ASP.NET網(wǎng)站，如圖4-7所示，向頁面中添加必要的控件說明文字，兩個文本框控件TextBox1、TextBox2；一個按鈕控件Button1。在用于輸入學(xué)生學(xué)號的文本框后面添加一個必須項(xiàng)驗(yàn)證控件RequiredFieldValidator1，在用于輸入學(xué)生成績的文本框后面添加一個范圍驗(yàn)證控件RangeValidator1。2.設(shè)置對象屬性各控件的初始屬性設(shè)置見表4-3。下一頁返回上一頁任務(wù)一完成注冊界面的設(shè)計(jì)【具體步驟】下一頁返回上一頁任務(wù)一完成注冊界面的設(shè)計(jì)3.編寫事件代碼頁面裝入時執(zhí)行的事件過程代碼如下：protectedvoidPage_Load(objectsender,EventArgse){this.Title="范圍驗(yàn)證控件應(yīng)用示例";txtNum.Focus();lblMsg.Text="";}下一頁返回上一頁任務(wù)一完成注冊界面的設(shè)計(jì)3.編寫事件代碼下一頁返回上一頁任務(wù)一完成注冊界面的設(shè)計(jì)單擊【提交】按鈕時執(zhí)行的事件代碼如下：protectedvoidbtnOK_Click(objectsender,EventArgse){lblMsg.Text="姓名："+txtNum.Text+"    "+"成績："+txtScore.Text;}下一頁返回上一頁任務(wù)一完成注冊界面的設(shè)計(jì)單擊【提交】按鈕時執(zhí)行的事件代碼如下任務(wù)一完成注冊界面的設(shè)計(jì)【案例4】制作用戶不能含有漢字、密碼為6～12位及對郵箱格式進(jìn)行驗(yàn)證的注冊頁面。【具體步驟】1.設(shè)計(jì)Web頁面新建一個ASP.NET網(wǎng)站，向由系統(tǒng)自動產(chǎn)生的默認(rèn)頁面中添加一個HTML表格，參照圖4-11適當(dāng)調(diào)整HTML表格的行列數(shù)及行高、列寬。向HTML表格中添加需要的控件說明文字，向頁面中添加三個文本框控件TextBox1～TextBox3；添加一個按鈕控件Button1和一個用于輸出驗(yàn)證是否通過信息的標(biāo)簽控件Label1；分別在用戶名文本框和密碼文本框的右側(cè)各添加一個自定義驗(yàn)證下一頁返回上一頁任務(wù)一完成注冊界面的設(shè)計(jì)【案例4】下一頁返回上一頁任務(wù)一完成注冊界面的設(shè)計(jì)控件CustomValidator1、CustomValidator2；在電子郵件文本框右側(cè)添加一個正則表達(dá)式驗(yàn)證控件RegularExpressionValidator1；適當(dāng)調(diào)整各控件的大小和位置。2.設(shè)置對象屬性各控件的初始屬性設(shè)置見表4-4。3.編寫事件代碼下一頁返回上一頁任務(wù)一完成注冊界面的設(shè)計(jì)控件CustomVa任務(wù)一完成注冊界面的設(shè)計(jì)【背景知識】數(shù)據(jù)驗(yàn)證機(jī)制介紹數(shù)據(jù)驗(yàn)證服務(wù)器控件可以提供易用但功能強(qiáng)大的方法檢查輸入窗體中的錯誤，并在必要時向用戶顯示消息。驗(yàn)證控件像其他服務(wù)器控件一樣添加到Web窗體頁。有不同的控件用于特定的驗(yàn)證類型，如范圍檢查或模式匹配，以及確保用戶不跳過輸入字段的RequiredFieldValidator等。可以將多個驗(yàn)證控件附加到一個輸入控件。例如，可以既指定需要輸入，又指定輸入必須包含特定范圍的值。

表4-5列出了所有的驗(yàn)證控件。接下來將分別詳細(xì)介紹這些控件的使用方法。下一頁返回上一頁任務(wù)一完成注冊界面的設(shè)計(jì)【背景知識】下一頁返回上一頁任務(wù)一完成注冊界面的設(shè)計(jì)在處理用戶的輸入時（如提交窗體時），Web窗體頁框架將用戶的輸入傳遞給關(guān)聯(lián)的驗(yàn)證控件。驗(yàn)證控件測試用戶的輸入，并設(shè)置屬性以指示輸入是否通過了驗(yàn)證測試。處理完所有的驗(yàn)證控件后，將設(shè)置頁上的IsValid屬性。如果有任何控件顯示驗(yàn)證檢查失敗，則整頁設(shè)置為無效。如果驗(yàn)證控件有錯誤，錯誤信息可由該驗(yàn)證控件顯示在頁中，或者顯示在頁上其他地方的ValidationSummary控件中。當(dāng)頁的IsValid屬性為False時，顯示ValidationSummary控件。它輪詢頁上的每個驗(yàn)證控件，并聚合每個控件公開的文本消息?？梢则?yàn)證的Web服務(wù)器控件見表4-6。返回上一頁任務(wù)一完成注冊界面的設(shè)計(jì)在表4-1各控件的初始屬性設(shè)置返回表4-1各控件的初始屬性設(shè)置返回表4-2各驗(yàn)證控件的初始屬性設(shè)置返回下一頁表4-2各驗(yàn)證控件的初始屬性設(shè)置返回下一頁表4-2各驗(yàn)證控件的初始屬性設(shè)置返回上一頁表4-2各驗(yàn)證控件的初始屬性設(shè)置返回上一頁表4-3各驗(yàn)證控件的初始屬性設(shè)置返回表4-3各驗(yàn)證控件的初始屬性設(shè)置返回表4-4各控件的初始屬性設(shè)置返回表4-4各控件的初始屬性設(shè)置返回表4-5驗(yàn)證控件的類型返回表4-5驗(yàn)證控件的類型返回表4-6可以驗(yàn)證的Web服務(wù)器控件返回表4-6可以驗(yàn)證的Web服務(wù)器控件返回圖4-1未通過驗(yàn)證時顯示的出錯信息返回圖4-1未通過驗(yàn)證時顯示的出錯信息返回圖4-2正常運(yùn)行結(jié)果返回圖4-2正常運(yùn)行結(jié)果返回圖4-3通過驗(yàn)證返回圖4-3通過驗(yàn)證返回圖4-4出錯提示返回圖4-4出錯提示返回圖4-5通過驗(yàn)證后顯示的輸出信息返回圖4-5通過驗(yàn)證后顯示的輸出信息返回圖4-6未通過驗(yàn)證時顯示的出錯提示返回圖4-6未通過驗(yàn)證時顯示的出錯提示返回圖4-7設(shè)計(jì)Web頁面返回圖4-7設(shè)計(jì)Web頁面返回圖4-11設(shè)計(jì)Web頁面返回圖4-11設(shè)計(jì)Web頁面返回項(xiàng)目四應(yīng)用驗(yàn)證控件

任務(wù)一完成注冊界面的設(shè)計(jì)項(xiàng)目四應(yīng)用驗(yàn)證控件任務(wù)一完成注冊界面的設(shè)計(jì)任務(wù)一完成注冊界面的設(shè)計(jì)【任務(wù)要點(diǎn)】常用驗(yàn)證服務(wù)器控件的使用【案例1】制作提交內(nèi)容必填的注冊頁面某網(wǎng)頁要求學(xué)生提交學(xué)號和專業(yè)，要求兩項(xiàng)內(nèi)容必填。若用戶沒有在文本框中輸入學(xué)號或沒有通過下拉列表框選擇專業(yè)，則顯示出錯提示，顯示圖4-1所示的Web頁面，程序正常運(yùn)行時顯示圖4-2所示的結(jié)果。下一頁返回任務(wù)一完成注冊界面的設(shè)計(jì)【任務(wù)要點(diǎn)】下一頁返回任務(wù)一完成注冊界面的設(shè)計(jì)【具體步驟】1.設(shè)計(jì)Web頁面新建一個ASP.NET網(wǎng)站，向頁面中添加必要的控件說明文字，添加一個按鈕控件Button1；一個文本框控件TextBox1；一個下拉列表框控件DropDownList1和兩個必須項(xiàng)驗(yàn)證控件RequiredFieldValidator1、RequiredFieldValidator2，注意將驗(yàn)證控件放置在被驗(yàn)證控件的右側(cè)。2.設(shè)置對象屬性Web頁面中各控件的初始屬性設(shè)置，見表4-1。下一頁返回上一頁任務(wù)一完成注冊界面的設(shè)計(jì)【具體步驟】下一頁返回上一頁任務(wù)一完成注冊界面的設(shè)計(jì)Web頁面加載時執(zhí)行的事件過程代碼如下：protectedvoidPage_Load(objectsender,EventArgse){dropSpec.Items.Add("--請選擇專業(yè)--");//填充專業(yè)下拉列表框中的選項(xiàng)dropSpec.Items.Add("網(wǎng)絡(luò)技術(shù)");dropSpec.Items.Add("軟件工程");dropSpec.Items.Add("多媒體應(yīng)用");dropSpec.Items.Add("計(jì)算機(jī)維修");this.Title="必須項(xiàng)驗(yàn)證控件應(yīng)用示例";//設(shè)置頁面標(biāo)題}下一頁返回上一頁任務(wù)一完成注冊界面的設(shè)計(jì)Web頁面加載時執(zhí)行的事件過程代碼如任務(wù)一完成注冊界面的設(shè)計(jì)單擊【提交】按鈕時執(zhí)行的事件過程代碼如下：protectedvoidbtnOK_Click(objectsender,EventArgse){//將用戶的選擇顯示到標(biāo)簽控件中l(wèi)blResult.Text="你的學(xué)號是："+txtNum.Text+"<br>"+"你的專業(yè)是："+dropSpec.Text;}下一頁返回上一頁任務(wù)一完成注冊界面的設(shè)計(jì)單擊【提交】按鈕時執(zhí)行的事件過程代碼任務(wù)一完成注冊界面的設(shè)計(jì)【案例2】利用比較驗(yàn)證控件來制作注冊頁面設(shè)計(jì)一個模擬的用戶注冊頁面，要求使用比較驗(yàn)證控件（CompareValidator）對用戶輸入密碼和確認(rèn)密碼的一致性、日期數(shù)據(jù)格式的正確性進(jìn)行比較驗(yàn)證，使用必須項(xiàng)驗(yàn)證控件（RequiredFieldValidator）設(shè)置用戶名及密碼為必填字段。程序運(yùn)行結(jié)果如圖4-3和圖4-4所示。下一頁返回上一頁任務(wù)一完成注冊界面的設(shè)計(jì)【案例2】利用比較驗(yàn)證控件來制作注冊任務(wù)一完成注冊界面的設(shè)計(jì)【具體步驟】1.設(shè)計(jì)Web頁面新建一個ASP.NET網(wǎng)站，切換到設(shè)計(jì)視圖。向由系統(tǒng)自動創(chuàng)建的Default.aspx頁面中添加一個用于布局的HTML表格，適當(dāng)調(diào)整表格的行列數(shù)；向表格中添加必要的控件說明文字；添加四個用于接收用戶輸入數(shù)據(jù)的文本框TextBox1～TextBox4；兩個按鈕控件Button1、Button2；一個用于顯示通過驗(yàn)證信息的標(biāo)簽控件Label1；添加兩個必須項(xiàng)驗(yàn)證控件RequiredFieldValidator1和RequiredFieldValidator2，兩個比較驗(yàn)證控件CompareValidator1、CompareValidator2，注意將必須項(xiàng)驗(yàn)證控件分別放置在用戶名欄和密碼欄的右側(cè)單元格，將比較驗(yàn)證控件分別放置在確認(rèn)密碼和出生日期欄的右側(cè)單元格；適當(dāng)調(diào)整各控件的大小及位置。下一頁返回上一頁任務(wù)一完成注冊界面的設(shè)計(jì)【具體步驟】下一頁返回上一頁任務(wù)一完成注冊界面的設(shè)計(jì)2.設(shè)置對象屬性各控件的初始屬性設(shè)置見表4-2。3.編寫事件代碼protectedvoidPage_Load(objectsender,EventArgse){this.Title="CompareValidator控件應(yīng)用示例";txtUsername.Focus();//頁面加載時，用戶名文本框得到焦點(diǎn)lblPass.Text="";//清除通過驗(yàn)證標(biāo)簽中的文本}protectedvoidbtnOK_Click(objectsender,EventArgse){lblPass.Text="本頁已通過驗(yàn)證！";//通過驗(yàn)證后在標(biāo)簽中顯示的信息}下一頁返回上一頁任務(wù)一完成注冊界面的設(shè)計(jì)2.設(shè)置對象屬性下一頁返回上一頁任務(wù)一完成注冊界面的設(shè)計(jì)【案例3】利用范圍驗(yàn)證控件來制作數(shù)值錄入頁面使用RangeValidator控件驗(yàn)證用戶輸入學(xué)生成績的數(shù)值范圍，用戶輸入數(shù)據(jù)被驗(yàn)證通過時頁面中顯示如圖4-5所示的結(jié)果。若用戶沒有輸入學(xué)號或輸入了不合邏輯的成績值，則顯示如圖4-6所示的出錯提示信息。下一頁返回上一頁任務(wù)一完成注冊界面的設(shè)計(jì)【案例3】利用范圍驗(yàn)證控件來制作數(shù)值任務(wù)一完成注冊界面的設(shè)計(jì)【具體步驟】1.設(shè)計(jì)Web頁面新建一個ASP.NET網(wǎng)站，如圖4-7所示，向頁面中添加必要的控件說明文字，兩個文本框控件TextBox1、TextBox2；一個按鈕控件Button1。在用于輸入學(xué)生學(xué)號的文本框后面添加一個必須項(xiàng)驗(yàn)證控件RequiredFieldValidator1，在用于輸入學(xué)生成績的文本框后面添加一個范圍驗(yàn)證控件RangeValidator1。2.設(shè)置對象屬性各控件的初始屬性設(shè)置見表4-3。下一頁返回上一頁任務(wù)一完成注冊界面的設(shè)計(jì)【具體步驟】下一頁返回上一頁任務(wù)一完成注冊界面的設(shè)計(jì)3.編寫事件代碼頁面裝入時執(zhí)行的事件過程代碼如下：protectedvoidPage_Load(objectsender,EventArgse){this.Title="范圍驗(yàn)證控件應(yīng)用示例";txtNum.Focus();lblMsg.Text="";}下一頁返回上一頁任務(wù)一完成注冊界面的設(shè)計(jì)3.編寫事件代碼下一頁返回上一頁任務(wù)一完成注冊界面的設(shè)計(jì)單擊【提交】按鈕時執(zhí)行的事件代碼如下：protectedvoidbtnOK_Click(objectsender,EventArgse){lblMsg.Text="姓名："+txtNum.Text+"    "+"成績："+txtScore.Text;}下一頁返回上一頁任務(wù)一完成注冊界面的設(shè)計(jì)單擊【提交】按鈕時執(zhí)行的事件代碼如下任務(wù)一完成注冊界面的設(shè)計(jì)【案例4】制作用戶不能含有漢字、密碼為6～12位及對郵箱格式進(jìn)行驗(yàn)證的注冊頁面?！揪唧w步驟】1.設(shè)計(jì)Web頁面新建一個ASP.NET網(wǎng)站，向由系統(tǒng)自動產(chǎn)生的默認(rèn)頁面中添加一個HTML表格，參照圖4-11適當(dāng)調(diào)整HTML表格的行列數(shù)及行高、列寬。向HTML表格中添加需要的控件說明文字，向頁面中添加三個文本框控件TextBox1～TextBox3；添加一個按鈕控件Button1和一個用于輸出驗(yàn)證是否通過信息的標(biāo)簽控件Label1；分別在用戶名文本框和密碼文本框的右側(cè)各添加一個自定義驗(yàn)證下一頁返回上一頁任務(wù)一完成注冊界面的設(shè)計(jì)【案例4】下一頁返回上一頁任務(wù)一完成注冊界面的設(shè)計(jì)控件CustomValidator1、CustomValidator2；在電子郵件文本框右側(cè)添加一個正則表達(dá)式驗(yàn)證控件RegularExpressionValidator1；適當(dāng)調(diào)整各控件的大小和位置。2.設(shè)置對象屬性各控件的初始屬性設(shè)置見表4-4。3.編寫事件代碼下一頁返回上一頁任務(wù)一完成注冊界面的設(shè)計(jì)控件CustomVa任務(wù)一完成注冊界面的設(shè)計(jì)【背景知識】數(shù)據(jù)驗(yàn)證機(jī)制介紹數(shù)據(jù)驗(yàn)證服務(wù)器控件可以提供易用但功能強(qiáng)大的方法檢查輸入窗體中的錯誤，并在必要時向用戶顯示消息。驗(yàn)證控件像其他服務(wù)器控件一樣添加到Web窗體頁。有不同的控件用于特定的驗(yàn)證類型，如范圍檢查或模式匹配，以及確保用戶不跳過輸入字段的RequiredFieldValidator等?？梢詫⒍鄠€驗(yàn)證控件附加到一個輸入控件。例如，可以既指定需要輸入，又指定輸入必須包含特定范圍的值。