Ch07 表單欄位驗證控制項 網頁程式設計.

Slides:



Advertisements
Similar presentations
第一單元 建立java 程式.
Advertisements

Task #3 使用ASP.NET服务器控件创建页面.
第八章 DataGrid 與 DataTable 瀏覽器 DataTable DataGrid 存取 顯示表格 暑資碩三 房玄博 報告.
ASP.NET 網頁製作教本 – 從基本語法學起
第13章 FTP檔案上傳、 自動傳送 報告人 M9153314 李育旻.
学习情境三:配置WEB服务器 服务器配置与管理.
《ASP.NET数据库网站设计教程(C#版)》
第6章 HTML控件和Web服务器控件 本章讲述的主要内容 6.1 ASP.NET控件概述 6.2 标准服务器端控件 6.3 数据验证控件
TQC+ JAVA全國教師研習會 PLWeb 程式設計練習平台 簡介.
《计算机网络技术》 asp.net 程序设计 文本类控件 笪静.
Chapter 7 網頁應用程式與狀態管理.
Ch03 VB.NET語法建立ASP.NET 網頁程式設計.
Web Part與 個人化網頁製作 資策會教育訓練處 王寧疆 MCAD.NET/MCSD.NET/MCT
Chapter 4 基本伺服器控制項.
國立高雄海洋科技大學 電子郵件收信軟體設定說明
動態網頁程式 設計實習 1042 數位教材 單元 9:ASP.NET物件及表單
Ch06 建立WEB表單 網頁程式設計.
Ch11 檔案上傳及電子郵件 WEB程式設計.
ASP.NET 網頁製作教本 – 從基本語法學起
在 Web 应用中,导航是非常重要的。ASP
客戶端的檔案上傳 HtmlInputFile檔案控制項 上傳單一檔案 同時上傳多個檔案.
ASP.NET 網頁製作教本 – 從基本語法學起
Google Data API Spreadsheet
Controls.
ASP.NET 網頁製作教本 – 從基本語法學起
SQL Stored Procedure SQL 預存程序.
ASP.NET基本設計與操作 建國科技大學 資管系 饒瑞佶 2007年.
第5章 Web表單程式設計模型 5-1 Web表單程式設計模型 5-2 ASP.NET的Page物件
第15章 豐富控制項.
網頁切換移轉 JS vs. ASP.NET.
ASP.NET 網頁製作教本 – 從基本語法學起
Visual Basic 物件導向程式設計簡介.
Ch10 網頁間的資料分享: Application Session 與Cookies的處理
App Inventor2呼叫PHP存取MySQL
第4章 使用验证控件.
主 讲 教 师:陆有军 Web技术与应用 第四章 内部对象 主 讲 教 师:陆有军
EBSCOhost App應用程式 安裝方式.
第3章 ASP.NET程序设计基础 3.
網頁切換移轉 JS vs. ASP.NET.
Chapter 6 資料驗證控制項.
第10章 網頁資料庫顯示與維護控制項 10-1 資料來源控制項 10-2 Repeater控制項 10-3 DataList控制項
表單(Form).
Topic Introduction—RMI
第一單元 建立java 程式.
VS.NET 2003 IDE.
網頁程式設計 本章投影片錄自HTML5、CSS3、RWD、jQuery Mobile跨裝網頁設計 陳惠貞 著 碁峰資訊股份有限公司出版
密碼變更說明 含WinXP、Win7及Citrix.
第18章 個人入口網站的建立 18-1入口網站的基礎 18-2 建立網站的搜尋引擎 18-3 網頁組件的個人化功能
網頁設計回顧.
網頁程式概論 建國科技大學資管系 饒瑞佶 2015/9 V1 2016/4 V2 2016/9 V3.
表格(HTML – FORM).
1 Session对象的特性 Session 状态对象 Session 对象常用的方法有: Session 对象常用的属性有:
第4章 ASP.NET服务器控件.
期末考.
挑戰C++程式語言 ──第8章 進一步談字元與字串
雙按button1,2,3,4 Method 方法/動作 textBox2.Text textBox1 textBox3.Text 轉為數字 c是數字 int c = int.Parse(textBox1.Text) + …; textBox3.Text = c.ToString();
Controls.
第6章 資料驗證、HTTP物件與錯誤處理 6-1 資料驗證的基礎 6-2 基本驗證控制項 6-3 進階驗證控制項
GridView.
向导控件的样式 当创建了一个向导控件时,系统会自动生成向导控件的 HTML 代码,示例代码如下所示。
表格(HTML – FORM)
函數應用(二)與自定函數.
1757: Secret Chamber at Mount Rushmore
資料結構與C++程式設計進階 期末考 講師:林業峻 CSIE, NTU 7/ 15, 2010.
電子郵件簡報.
What is “this”? 在物件導向程式設計中,類別的定義就是在說明如果創建了“這個物件”的話,它會具有那些屬性與功能,以及這些功能是如何實現的。 而所謂的“這個物件”就以 this 來表示。 當我們在JavaScript與jQuery中寫 script 程式(函式)時,“誰”呼叫這個函式,這個“誰”就是該函式中所謂的.
第五章 自訂佈景主題與文字處理 講授者:詹雅愔.
NFC (近場通訊, Near Field Communication) 靜宜大學資管系 楊子青
C語言程式設計 老師:謝孟諺 助教:楊斯竣.
InputStreamReader Console Scanner
Presentation transcript:

Ch07 表單欄位驗證控制項 網頁程式設計

大綱 表單送回功能(Postback) ASP.NET的表單欄位驗證 RequiredFiledValidator驗證控制項 CompareValidator驗證控制項 RangeValidator驗證控制項 RegularExpressionValidator驗證控制項 CustomValidator驗證控制項 ValidationSummary驗證控制項

表單送回功能(Postback) ASP.NET應用程式是使用Web表單控制項讓使用者輸入或選取資料,輸入的資料在客戶端是以表單送回功能,將資料送回伺服端來進行處理,預設是送到本身的ASP.NET程式,其相關屬性如下所示: Page物件的IsPostBack屬性:檢查是否是第一次載入ASP.NET程式,或是已經在客戶端執行過送回。 伺服端控制項的AutoPostBack屬性:如果控制項指定AutoPostBack屬性為True,當控制項的資料變更時,就會自動執行客戶端送回的功能。

Web表單的IsPostBack屬性 在Page_Load事件處理程序可以使用Page物件的IsPostBack屬性檢查表單是否已經送回資料,如下所示: If Page.IsPostBack Then If name.Text <> "" Then show.Text = name.Text & "歡迎進入網頁!" End If Else name.Text = "陳會安" labelName.Text = "輸入姓名: "

控制項的AutoPostBack屬性-說明 Web表單控制項如果擁有AutoPostBack屬性,就可以自動送回控制項內容的變更,例如:DropDownList控制項,如下所示: <asp:DropDownList id="Username" Width="100px" AutoPostBack="True" OnSelectedIndexChanged="Change_Name" runat="Server"> <asp:ListItem Text="陳會安" Value="001"/> <asp:ListItem Text="江小魚" Value="002"/> <asp:ListItem Text="陳大安" Value="003"/> </asp:DropDownList>

控制項的AutoPostBack屬性-控制項 Web控制項支援AutoPostBack屬性和其觸 發的事件,如下表所示:

範例1:IsPostBack與AutoPostBack的比較 <%@ Page Language="VB" %> <html> <head> <title> Web表單的IsPostBack屬性</title> <script language="VB" runat="server"> Sub Page_Load(S as Object, E as EventArgs) If Page.IsPostBack Then If name.Text <> "" Then show.Text = name.Text & "歡迎進入網頁!" End If Else name.Text = "" lblName.Text = "輸入姓名: " End Sub </script> </head> <body> <h2> Web表單的IsPostBack屬性</h2><hr> <form runat="Server"> <asp:Label id="lblName" runat="Server“/> <asp:Textbox id="name" runat="Server"/> <asp:button text="送出" runat="Server"/> </form> <asp:Label id="show" runat="server" /> </body> </html>

範例1:IsPostBack與AutoPostBack的比較 <%@ Page Language="VB" %> <html> <head> <title>控制項的AutoPostBack屬性</title> <script language="VB" runat="server"> Sub Page_Load(S as Object, E as EventArgs) If Page.IsPostBack Then If name.Text <> "" Then show.Text = name.Text & "歡迎進入網頁!" End If Else name.Text = "" lblName.Text = "輸入姓名: " End Sub Sub Change_Name(S as Object, E as EventArgs) show.Text = name.Text & "你好!" </script> </head> <body> <h2>控制項的AutoPostBack屬性</h2><hr> <form runat="Server"> <asp:Label id="lblName" runat="Server"/> <asp:Textbox id="name" runat="Server" AutoPostBack="True" OnTextChanged="Change_Name"/> <asp:button text="送出" runat="Server"/> </form> <asp:Label id="show" runat="server" /> </body> </html>

ASP.NET的表單欄位驗證-說明 Web表單是ASP.NET應用程式的輸入介面,不過使用者在輸入資料時常常粗心大意,程式設計者並不能期望填寫的資料一定正確,相反的,應該假設使用者都會出錯,所以需要使用表單欄位驗證,檢查使用者輸入的資料。

ASP.NET的表單欄位驗證-種類

ASP.NET的表單欄位驗證-使用 如果Web表單擁有上表的欄位驗證控制項,就可以檢查Page物件的IsValid屬性,以確認表單是否通過驗證,如下所示: If Page.IsValid Then ……… End If If條例的程式碼在確認IsValid屬性為True,表示通過驗證,接著才可以執行Web表單的處理。

RequiredFieldValidator驗證控制項-使用 <asp:RequiredFieldValidator id="validName" ControlToValidate="name" ErrorMessage="必須輸入使用者名稱!" runat="Server"/>

RequiredFieldValidator驗證控制項-屬性

RequiredFieldValidator驗證控制項-InitialValue屬性 <asp:RequiredFieldValidator id="validPass" ControlToValidate="pass" InitialValue="1234" ErrorMessage="必須輸入使用者密碼!" runat="Server"/> 驗證控制項要求TextBox控制項pass的值不可以是【1234】,可以是空白。

範例2:使用RequiredFieldValidator控制項測試是否有輸入值 <Html> <head> <title>RequiredFieldValidator控制項</title> <Script Language="VB" Runat="Server"> Sub Button1_Click(Sender As Object, e As EventArgs) If Page.IsValid Then Table1.Visible="False" Label1.Text="恭喜您註冊成功<Br>" Label5.Text="您的帳號是:" & TextBox1.Text Label5.Text+="<Br>您的密碼是:" & TextBox2.Text If TextBox3.Text="" Then Label5.Text+="<Br>您未填寫註冊的E-Mail" Else Label5.Text+="<Br>您的註冊的E-Mail是:" & TextBox3.Text End If Label5.Text="AAA" End Sub </Script> </head>

範例2:使用RequiredFieldValidator控制項測試是否有輸入值(續) <Body> <ASP:Label Id="Label1" Runat="Server" Font-Size="14" ForeColor="Blue" Text="請輸入下列註冊資料"/> <Form Runat="Server"> <ASP:Table Id="Table1" Runat="Server"> <ASP:TableRow Id="Row1" Runat="Server"> <ASP:TableCell Id="Cell1" Runat="Server" HorizontalAlign="Right"> <ASP:Label Id="Label2" Runat="Server" Text="帳號:"/> </ASP:TableCell> <ASP:TableCell Id="Cell2" Runat="Server"> <ASP:TextBox Id="TextBox1" Runat="Server"/> <ASP:RequiredFieldValidator Id="Validator1" Runat="Server" ControlToValidate="TextBox1" Text="必須要有資料" ForeColor="Red"/> </ASP:TableRow> <ASP:TableRow Id="Row2" Runat="Server"> <ASP:TableCell Id="Cell3" Runat="Server" HorizontalAlign="Right"> <ASP:Label Id="Label3" Runat="Server" Text="密碼:"/> <ASP:TableCell Id="Cell4" Runat="Server"> <ASP:TextBox Id="TextBox2" Runat="Server" TextMode="Password"/> <ASP:RequiredFieldValidator Id="Validator2" Runat="Server" ControlToValidate="TextBox2" Text="必須要有資料" ForeColor="Red"/>

範例2:使用RequiredFieldValidator控制項測試是否有輸入值(續) <ASP:TableRow Id="Row3" Runat="Server"> <ASP:TableCell Id="Cell5" Runat="Server" HorizontalAlign="Right"> <ASP:Label Id="Label4" Runat="Server" Text="E-Mail:"/> </ASP:TableCell> <ASP:TableCell Id="Cell6" Runat="Server"> <ASP:TextBox Id="TextBox3" Runat="Server"/> </ASP:TableRow> <ASP:TableRow Id="Row4" Runat="Server"> <ASP:TableCell Id="Cell7" Runat="Server" Colspan="2"> <ASP:Button Id="Button1" Runat="Server" Text="送出註冊" OnClick="Button1_Click"/><P> </ASP:Table> </Form> <ASP:Label Id="Label5" Runat="Server"/> </Body> </Html>

CompareValidator驗證控制項-使用 <asp:CompareValidator id="validComp" ControlToValidate="pass" ControlToCompare = "pass1“ Operator=“比較運算子” Type="String" Display="Dynamic" ErrorMessage="兩次輸入的密碼不同!" runat="Server"/>

CompareValidator驗證控制項-屬性

CompareValidator驗證控制項-Operator屬性的比較運算子

範例3: 測試新舊密碼(CompareValidator控制項中的ControlToCompare) <Html> <head> <title>CompareValidator控制項中的ControlToCompare</title> <Script Language="VB" Runat="Server"> Sub Button1_Click(Sender As Object, e As EventArgs) If Page.IsValid Then Label1.Text="密碼更改成功!!" End If End Sub </Script> </head>

範例3: 測試新舊密碼(CompareValidator控制項中的ControlToCompare) <Body> <Form Runat="Server"> <ASP:Table Id="Table1" Runat="Server"> <ASP:TableRow Id="Row1" Runat="Server"> <ASP:TableCell Id="Cell1" Runat="Server" ColumnSpan="2" HorizontalAlign="Center"> <ASP:Label Id="Label1" Runat="Server" Text="更 改 密 碼" ForeColor="Blue" Font-Size="14"/> </ASP:TableCell> </ASP:TableRow> <ASP:TableRow Id="Row3" Runat="Server"> <ASP:TableCell Id="Cell4" Runat="Server" HorizontalAlign="Right"> <ASP:Label Id="Label3" Runat="Server" Text="新密碼:"/> <ASP:TableCell Id="Cell5" Runat="Server"> <ASP:TextBox Id="TextBox2" Runat="Server"/>

範例3: 測試新舊密碼(CompareValidator控制項中的ControlToCompare) <ASP:TableRow Id="Row4" Runat="Server"> <ASP:TableCell Id="Cell6" Runat="Server" HorizontalAlign="Right"> <ASP:Label Id="Label4" Runat="Server" Text="確認新密碼:"/> </ASP:TableCell> <ASP:TableCell Id="Cell7" Runat="Server"> <ASP:TextBox Id="TextBox3" Runat="Server"/> </ASP:TableRow> <ASP:TableRow Id="Row5" Runat="Server"> <ASP:TableCell Id="Cell8" Runat="Server" HorizontalAlign="Center"> <ASP:Button Id="Button1" Runat="Server" Text="更改密碼" OnClick="Button1_Click"/> <ASP:TableCell Id="Cell9" Runat="Server"> <asp:CompareValidator id="Comp1" runat="server" ControlToValidate="TextBox3" ControlToCompare="TextBox2" Type="String" Operator="Equal" Text="* 新密碼不符合"/> </asp:CompareValidator> </ASP:Table> </Form>

範例4: 新增行事曆(行事曆的日期必須在今天以後的日子) <Html> <head> <title>新增在今天之後的行事曆</title> <Script Language="VB" Runat="Server"> Sub Page_Load(Sender As Object, e As EventArgs) Validator2.ValueToCompare=DateTime.Today() End Sub Sub Button1_Click(Sender As Object, e As EventArgs) If Page.IsValid Then Table1.Visible="False" Label1.Text="新增行事曆內容成功<Br>" Label4.Text="時間:" & TextBox1.Text Label4.Text+="<Br>內容:" & Replace(TextBox2.Text,Chr(13),"<Br>") End If </Script> </head>

範例4: 新增行事曆(行事曆的日期必須在今天以後的日子) <Body> <ASP:Label Id="Label1" Runat="Server" Font-Size="14" ForeColor="Blue" Text="新增行事曆內容"/> <Form Runat="Server"> <ASP:Table Id="Table1" Runat="Server"> <ASP:TableRow Id="Row1" Runat="Server"> <ASP:TableCell Id="Cell1" Runat="Server" HorizontalAlign="Right"> <ASP:Label Id="Label2" Runat="Server" Text="日期:"/> </ASP:TableCell> <ASP:TableCell Id="Cell2" Runat="Server"> <ASP:TextBox Id="TextBox1" Runat="Server" Text="輸入格式:yyyy/mm/dd"/> <ASP:RequiredFieldValidator Id="Validator1" Runat="Server" ControlToValidate="TextBox1" Text="必須要有資料" ForeColor="Red"/> </ASP:TableRow> <ASP:TableRow Id="Row2" Runat="Server"> <ASP:TableCell Id="Cell3" Runat="Server" HorizontalAlign="Right"> <ASP:Label Id="Label3" Runat="Server" Text="內容:"/> <ASP:TableCell Id="Cell4" Runat="Server"> <ASP:TextBox Id="TextBox2" Runat="Server" TextMode="MultiLine" Rows="4"/>

範例4: 新增行事曆(行事曆的日期必須在今天以後的日子) <ASP:TableRow Id="Row3" Runat="Server"> <ASP:TableCell Id="Cell5" Runat="Server" Colspan="2"> <ASP:Button Id="Button1" Runat="Server" Text="新增內容" OnClick="Button1_Click"/><P> </ASP:TableCell> </ASP:TableRow> <ASP:TableRow Id="Row4" Runat="Server"> <ASP:TableCell Id="Cell6" Runat="Server" Colspan="2"> <ASP:CompareValidator Id="Validator2" Runat="Server" ControlToValidate="TextBox1" Operator="GreaterThanEqual" Type=“Date" Text="請輸入今天以後的日期(含今天)"/> </ASP:Table> </Form> <ASP:Label Id="Label4" Runat="Server"/> </Body> </Html>

RangeValidator驗證控制項-使用 <asp:RangeValidator id="validRange" ControlToValidate="age" Display="Dynamic" Type="Integer" MinimumValue="21" MaximumValue="70" ErrorMessage="年齡的範圍是21 ~ 70!" runat="server"/>

RangeValidator驗證控制項-屬性

範例5: 輸入成績(使用RangeValidator控制項) <Html> <head> <title>成績輸入(使用RangeValidator控制輸入範圍在0~100間)</title> <Script Language="VB" Runat="Server"> Sub Button1_Click(Sender As Object, e As EventArgs) If Page.IsValid Then IF TextBox1.Text > 60 Then Label2.Text="您的分數是:" & TextBox1.Text Label2.Text+=",恭喜您過關了!" Else Label2.ForeColor=System.Drawing.Color.Red Label2.Text+="要再加油囉!!" End If End Sub </Script> </head>

範例5: 輸入成績(使用RangeValidator控制項) <Body> <Form Runat="Server"> <ASP:Table Id="Table1" Runat="Server" BorderColor="LightBlue" BorderWidth="3"> <ASP:TableRow Id="Row1" Runat="Server"> <ASP:TableCell Id="Cell1" Runat="Server"> <ASP:Label Id="Label1" Runat="Server" Text="請輸入成績:"/> </ASP:TableCell> <ASP:TableCell Id="Cell2" Runat="Server"> <ASP:TextBox Id="TextBox1" Runat="Server"/> </ASP:TableRow> <ASP:TableRow Id="Row2" Runat="Server"> <ASP:TableCell Id="Cell3" Runat="Server" HorizontalAlign="Center"> <ASP:Button Id="Button1" Runat="Server" Text="確定" OnClick="Button1_Click"/> <ASP:TableCell Id="Cell4" Runat="Server"> <ASP:RangeValidator Id="Comp1" Runat="Server" ControlToValidate="TextBox1" MinimumValue="0" MaximumValue="100" Type="Integer" Text="請輸入0~100之間的數字"/> </ASP:Table> </Form> <ASP:Label Id="Label2" Runat="Server"/> </Body> </Html> 輸入的值只可以是整數,所以70.5是 不合法的,如果要讓70.5合法,必須 設定Type=“Double”

RegularExpressionValidator驗證控制項-正規運算式 在正規運算式的範本字串中,每一個字元都有特殊意義,屬於一種小型的字串比對語言,正規運算式直譯程式或稱引擎能夠將定義的正規運算式和字串變數進行比較,引擎傳回布林值,True表示字串符合範本字串的定義,False表示不符合。

RegularExpressionValidator驗證控制項-字元與字元集1

RegularExpressionValidator驗證控制項-字元與字元集2

RegularExpressionValidator驗證控制項-字元與字元集3

RegularExpressionValidator驗證控制項-正規運算式範例

RegularExpressionValidator驗證控制項-使用 在Web表單的RegularExpressionValidator驗證控制項可以指定使用正規運算式的範本字串來進行資料驗證,如下所示: <asp:RegularExpressionValidator id="ValidRegxEmail" ControlToValidate="email" Display="Static" ValidationExpression="[\w\.]+@[\w\.]*" ErrorMessage="郵件地址的格式錯誤" runat="Server"/>

RegularExpressionValidator驗證控制項-屬性

範例6:驗證身份證字號、電話、電子郵件(RegularExpressionValidator) <Html> <head> <title>驗證身份證字號、電話、電子郵件(RegularExpressionValidator)</title> <Script Language="VB" Runat="Server"> Sub Button1_Click(Sender As Object, e As EventArgs) If Page.IsValid Then Label1.Text="驗証成功" End If End Sub </Script> </head>

範例6:驗證身份證字號、電話、電子郵件(RegularExpressionValidator) <Body> <Form Runat="Server"> <ASP:Table Id="Table1" Runat="Server" BorderWidth="3" BorderColor="LightBlue"> <ASP:TableRow Id="Row1" Runat="Server"> <ASP:TableCell Id="Cell1" Runat="Server" ColumnSpan="2" HorizontalAlign="Center"> <ASP:Label Id="Label1" Runat="Server" ForeColor="Blue" Text="請填寫下列的資料"/> </ASP:TableCell> </ASP:TableRow> <ASP:TableRow Id="Row2" Runat="Server"> <ASP:TableCell Id="Cell2" Runat="Server" HorizontalAlign="Right"> <ASP:Label Id="Label2" Runat="Server" Text="姓名:"/> <ASP:TableCell Id="Cell3" Runat="Server"> <ASP:TextBox Id="TextBox1" Runat="Server"/> <ASP:RequiredFieldValidator Id="Comp1" Runat="Server" ControlToValidate="TextBox1" Text="不能空白"/>

範例6:驗證身份證字號、電話、電子郵件(RegularExpressionValidator) <ASP:TableRow Id="Row3" Runat="Server"> <ASP:TableCell Id="Cell4" Runat="Server" HorizontalAlign="Right"> <ASP:Label Id="Label3" Runat="Server" Text="身份證字號:"/> </ASP:TableCell> <ASP:TableCell Id="Cell5" Runat="Server"> <ASP:TextBox Id="TextBox2" Runat="Server"/> <ASP:RequiredFieldValidator Id="Comp2" Runat="Server" ControlToValidate="TextBox2" Text="不能空白"/> <ASP:RegularExpressionValidator Id="Comp3" Runat="Server" ValidationExpression="[a-zA-Z]{1}[12]{1,}[0-9]{8}" ErrorMessage="身份證字號錯誤!"/> </ASP:TableRow> <ASP:TableRow Id="Row4" Runat="Server"> <ASP:TableCell Id="Cell6" Runat="Server" HorizontalAlign="Right"> <ASP:Label Id="Label5" Runat="Server" Text="行動電話:"/> <ASP:TableCell Id="Cell7" Runat="Server"> <ASP:TextBox Id="TextBox3" Runat="Server"/> <ASP:RegularExpressionValidator Id="Comp4" Runat="Server" ControlToValidate="TextBox3" ValidationExpression="[0-9]{4}-[0-9]{6}" Text="格式錯誤"/> <ASP:RequiredFieldValidator Id="Comp5" Runat="Server"

範例6:驗證身份證字號、電話、電子郵件(RegularExpressionValidator) <ASP:TableRow Id="Row5" Runat="Server"> <ASP:TableCell Id="Cell8" Runat="Server" HorizontalAlign="Right"> <ASP:Label Id="Label6" Runat="Server" Text="電子郵件:"/> </ASP:TableCell> <ASP:TableCell Id="Cell9" Runat="Server"> <ASP:TextBox Id="TextBox4" Runat="Server"/> <ASP:RegularExpressionValidator Id="Comp6" Runat="Server" ControlToValidate="TextBox4" ValidationExpression="[a-zA-Z0-9]+@[.a-zA-Z0-9]+" Text="格式錯誤"/> <ASP:RequiredFieldValidator Id="Comp7" Runat="Server" Text="不能空白"/> </ASP:TableRow> <ASP:TableRow Id="Row6" Runat="Server"> <ASP:TableCell Id="Cell10" Runat="Server" HorizontalAlign="Right"> <ASP:Button Id="Button1" Runat="Server" Text="確 定" OnClick="Button1_Click"/> </ASP:Table> </Form> </Body> </Html>

CustomValidator驗證控制項-使用 CurstomValidator驗證控制項可以使用自行撰寫的程序來驗證控制項的值,如下所示: <asp:CustomValidator id="validCustom" ControlToValidate="name" Display="Dynamic" OnServerValidate="Check_UserName" ErrorMessage="使用者稱格式錯誤!" runat="Server"/>

CustomValidator驗證控制項-屬性與事件 當OnServerValidator事件觸發後,事件處理程序,如下: Sub Check_UserName(Sender As Object, e As ServerValidateEventArgs) If IsNumeric(e.Value) Then e.IsValid = False Else e.IsValid = True End If End Sub

ValidationSummary驗證控制項-使用 <asp:ValidationSummary ID="validSummary" HeaderText="Web表單欄位的錯誤資料: " DisplayMode="BulletList“ ShowSummary=“True或False” ShowMessageBox=“True或False” runat="Server"/>

ValidationSummary驗證控制項-屬性

範例7:顯示那些控制項未通過驗證 <Html> <head> <title>驗證身份證字號、電話、電子郵件(ValidationSummary控制項)</title> <Script Language="VB" Runat="Server"> Sub Button1_Click(Sender As Object, e As EventArgs) If Page.IsValid Then Label1.Text="驗証成功" End If End Sub </Script> </head>

範例7:顯示那些控制項未通過驗證 <Body> <Form Runat="Server"> <ASP:Table Id="Table1" Runat="Server" BorderWidth="3" BorderColor="LightBlue"> <ASP:TableRow Id="Row1" Runat="Server"> <ASP:TableCell Id="Cell1" Runat="Server" ColumnSpan="2" HorizontalAlign="Center"> <ASP:Label Id="Label1" Runat="Server" ForeColor="Blue" Text="請填寫下列的資料"/> </ASP:TableCell> </ASP:TableRow> <ASP:TableRow Id="Row2" Runat="Server"> <ASP:TableCell Id="Cell2" Runat="Server" HorizontalAlign="Right"> <ASP:Label Id="Label2" Runat="Server" Text="姓名:"/> <ASP:TableCell Id="Cell3" Runat="Server"> <ASP:TextBox Id="TextBox1" Runat="Server"/> <ASP:RequiredFieldValidator Id="Comp1" Runat="Server" ControlToValidate="TextBox1" Text="*" ErrorMessage="姓名不能空白"/>

範例7:顯示那些控制項未通過驗證 <ASP:TableRow Id="Row3" Runat="Server"> <ASP:TableCell Id="Cell4" Runat="Server" HorizontalAlign="Right"> <ASP:Label Id="Label3" Runat="Server" Text="身份證字號:"/> </ASP:TableCell> <ASP:TableCell Id="Cell5" Runat="Server"> <ASP:TextBox Id="TextBox2" Runat="Server"/> <ASP:RequiredFieldValidator Id="Comp2" Runat="Server" ControlToValidate="TextBox2" Text="*" ErrorMessage="身份證字號不能空白"/> <ASP:RegularExpressionValidator Id="Comp3" Runat="Server" ValidationExpression="[a-zA-Z]{1}[12]{1,}[0-9]{8}" ErrorMessage="身份證字號錯誤!"/> </ASP:TableRow> <ASP:TableRow Id="Row4" Runat="Server"> <ASP:TableCell Id="Cell6" Runat="Server" HorizontalAlign="Right"> <ASP:Label Id="Label5" Runat="Server" Text="行動電話:"/> <ASP:TableCell Id="Cell7" Runat="Server"> <ASP:TextBox Id="TextBox3" Runat="Server"/> <ASP:RegularExpressionValidator Id="Comp4" Runat="Server" ControlToValidate="TextBox3" ValidationExpression="[0-9]{4}-[0-9]{6}" ErrorMessage="行動電話格式錯誤XXXX-XXXXXX"/> <ASP:RequiredFieldValidator Id="Comp5" Runat="Server" ErrorMessage="行動電話不能空白"/>

範例7:顯示那些控制項未通過驗證 <ASP:TableRow Id="Row5" Runat="Server"> <ASP:TableCell Id="Cell8" Runat="Server" HorizontalAlign="Right"> <ASP:Label Id="Label6" Runat="Server" Text="電子郵件:"/> </ASP:TableCell> <ASP:TableCell Id="Cell9" Runat="Server"> <ASP:TextBox Id="TextBox4" Runat="Server"/> <ASP:RegularExpressionValidator Id="Comp6" Runat="Server" ControlToValidate="TextBox4" ValidationExpression="[a-zA-Z0-9]+@[.a-zA-Z0-9]+" Text="*" ErrorMessage="電子郵件格式錯誤"/> <ASP:RequiredFieldValidator Id="Comp7" Runat="Server" ErrorMessage="電子郵件不能空白"/> </ASP:TableRow> <ASP:TableRow Id="Row6" Runat="Server"> <ASP:TableCell Id="Cell10" Runat="Server" HorizontalAlign="Right"> <ASP:Button Id="Button1" Runat="Server" Text="確 定" OnClick="Button1_Click"/>

範例7:顯示那些控制項未通過驗證 <ASP:TableRow Id="Row7" Runat="Server"> <ASP:TableCell Id="Cell11" Runat="Server" ColumnSpan="2"> <ASP:ValidationSummary Id="Comp8" Runat="Server" HeaderText="* 欄位發生以下的錯誤:"/> </ASP:TableCell> </ASP:TableRow> </ASP:Table> </Form> </Body> </Html>

豐富控制項 ASP.NET為了更豐富網頁上的呈現面,所特別提供的一些控制項 豐富控制項 說明 <asp:Calendar> 月曆 <asp:AdRotator 廣告迴旋板

範例8:製作月曆 <html> <body> <form runat="server"> <asp:Calendar id="C1" runat="server"> <TitleStyle BackColor="Pink" /> <DayStyle BackColor="LightYellow" /> <TodayDayStyle ForeColor="green" /> <WeekendDayStyle BackColor="red" /> <DayHeaderStyle BackColor="yellow" /> <OtherMonthDayStyle ForeColor="LightGray" /> </asp:Calendar> </form> </body>

範例9:廣告看板 Ex08-09.xml Ex08_09.aspx <html> <body> <?xml version="1.0" encoding="utf-8" ?> <Advertisements> <Ad> <ImageUrl>Ex08_09_01.gif</ImageUrl> <NavigateUrl>http://www.nkmu.edu.tw</NavigateUrl> <AlternateText>nkmu</AlternateText> <Impressions>1</Impressions> </Ad> <ImageUrl>Ex08_09_02.gif</ImageUrl> <NavigateUrl>http://www.nkmu.edu.tw/campus/im </NavigateUrl> <AlternateText>nkmu.mis</AlternateText> <ImageUrl>Ex08_09_03.gif</ImageUrl> <NavigateUrl>http://mis2.nkmu.edu.tw/wangdaj </NavigateUrl> <AlternateText>wangdaj</AlternateText> </Advertisements> Ex08_09.aspx <html> <body> <asp:AdRotator id="A1" runat="server" AdvertisementFile ="Ex08-09.xml" /> </body>

練習一 為左圖中的欄位加上驗證控制項

練習二 建立一個CustomValidator控制項,檢查客戶端輸入的身份證字號是否合法 身份證字號計算規則: 身份證字號由一個英文字母+9個數字構成 先將身份證字號的英文字母代換為數字編碼,如右表: 將字母轉換成2碼後,身份證號變成11碼 11碼分別乘以:1,9,8,7,6,5,4,3,2,1,1 加總上述11組數字相乘後的結果,結果X X可被10整除,則表示輸入正確的身份證字號  A B C D E F G H I J K L M N 10 11 12 13 14 15 16 17 34 18 19 20 21 22 O P Q R S T U V W X Y Z 35 23 24 25 26 27 28 29 30 31 32 33