asp.net
．建立留言頁面----資料驗證控制項及添加資料
相關介紹:
資料正確性是網站所必需的。為了更容易的檢驗使用者輸入的資料是否正確，ASP.NET為編程人員提供了資料驗證控制項。ASP.NET提供的資料驗證控制項包括。(注意：為了能顯示代碼，以下所有代碼都在“<”之後和“>”之前加了空格，不便之處請多原諒！):
控制項 |
功能 |
RequiredFieldValidator |
檢驗某一輸入欄是否有資料輸入 |
RangeValidator |
檢驗某一輸入欄所輸入的資料是否在特定的範圍內 |
CompareValidator |
檢驗某一輸入欄是否等於，不等於，大於，不小於，小於 |
ValidationSummary |
列出所有未通過檢驗的控制項 |
RegularExpressionValidator |
檢驗某一欄是否符合Regex規則 |
CustomValidator |
自定驗證規則 |
STEP 1 設計頁面
我們先用表格設計出大概的架構。由於資料庫中的COMMENTS表中有
[圖5-1 資料庫架構]
COMMENT_ID(自動編號),FIRST_NAME(文本),LAST_NAME(文本),TELEPHONE(文本),EMAIL(文本),SUBMIT_DATE(日期/時間),COMMENTS(備忘),ANSWERED(布爾值)等欄位。根據需要我們在網站中設計了如下圖的頁面,命名為reg.aspx。
[圖5-2 最初頁面]
其中COMMENT_ID，是可以由ACCESS自動添加的,ANSWERED不需要使用者自己添加。在SUBMIT_DATE的預設值設定為Now()，則會由ACCESS自動寫入添加紀錄的日期。
以前的ASP頁面中，我們可以通過來設定輸入框來輸入資料。ASP.NET中帶有textbox控制項來接受資料，文法如下:
< asp:textbox id=”…” runat=”server” 其他屬性/ >
在DreamweaverMX中可以通過單擊 快捷按鈕來添加textbox控制項。在彈出的對話方塊中通過設定ID,text mode(對話方塊類型)，tool tip(即滑鼠懸於控制項上的提示)，以及Layout(樣式設計)，Style Information(用於設定輸入文字格式以及textbox邊框格式)，來設定控制項。下圖是textbox的設定對話方塊。
[圖5-3 textbox設定對話方塊1]
[圖5-4 textbox設定對話方塊2]
[圖5-5 textbox設定對話方塊3]
由於資料項目COMMENT需要輸入大量的文字，所以需要用到多輸入行的textbox。只需設定text mode為MultiLine並輸入所需的行數(Rows)即可。
為了產生添加的事件，還需要一個按鈕。單擊Forms標籤，單擊”button”按鈕添加。
STEP2 資料驗證的使用
由於First_name,Last_name,telephone,email是必須輸入的，所以為了防止使用者忘記輸入，則可以添加RequiredFieldValidator控制項來驗證控制項。由於控制項會在出現驗證有誤的情況下在其所在的位置顯示驗證不通過的內容，故應在適當的位置放入資料驗證控制項。
RequiredFieldValidator資料驗證的控制項文法如下:
< asp:RequiredFieldValidato其他屬性 runat=”server” >出錯資訊< / asp:RequiredFieldValidator >
或
< asp:RequiredFieldValidator ErrorMessage="出錯資訊" 其他屬性 runat=”server”/ >
在單擊More Tags後，選擇ASP.NET Tags的Validation Server可以看到有不同類型的資料驗證控制項選擇。我們需要在First_name的輸入框後面添加驗證控制項asp:RequiredFieldValidator。
在RequiredfieldValidator控制項設定視窗中，Control to Validate是為與此資料驗證控制項相關聯的輸入控制項的ID，而Error Message就是資料驗證失敗的時候顯示的資訊。同時我們可以通過設定layout,style Information來選擇所需的樣式。
[圖5-6 驗證控制項選擇]
[圖5-7 RequiredfieldValidator控制項設定對話方塊]
同時在Last_Name輸入框後面用相同的方法添加另一個RequiredFieldValidato資料驗證控制項。現在我們可以儲存，並預覽頁面。當沒有在First_name和Last_name輸入框中輸入資料而且單擊Submit按鈕的時候,就會出現驗證失敗訊息。如圖5-8所示。
但是很多時候我們需要驗證有效資料，比如郵遞區號一定為6位，輸入的Email地址需要有特定的形式。這裡就需要用到RegularExpressionValidator來驗證資料的有效性。在本註冊頁面中，telephone和Email都可以用到此控制項來驗證。
[圖5-8 RequiredfieldValidator對話方塊]
[圖5-9 Email設定屬性]
同RequiredfieldValidator驗證控制項添加的方法類似，單擊”More tags..”選擇添加資料驗證控制項。不同的地方就是設定Validation Expression。由於telephone需要輸入7-10位的數字，需設定如下:
[0-9]{7,10}
其文法如下:
[]：用來定義可接受的字元，如a-z表示小寫’a’-‘z’都是可接受的字元，a-zA-Z表示可接受所有字母，而0-9就表示可以接受所有數字。
{}：用來定義必須輸入的字元數，{7,10}表示可以輸入7-10個字元，{0,}表示可以接受0-無限多個字元。
‘.’：表示輸入任一字元。.{0,}表示可接受0-無限多個任一字元。
| ：表示OR(或)，例如[A-Za-z]{3}|[0-9]{3}表示可以接受3個英文字母或是3個數字
()：為了方便閱讀，含有|符號的字串通常會被()之中。例如([A-Za-z]{3}|[0-9]{3})。
\：如果含有[],{},(),|等特殊符號必須在這些字串之前加上\.。
下列是一些比較常用的例子：
Email: .{1,}@.{1,}/..{1}
電話(包括區號): \([0-9]{3,4})\)[0-9]{7,8}
雖然不可以保證使用者輸入是其真正的資料，但是檢驗控制項可以保證格式是對的。
[圖5-10 預覽頁面]
至於CompareValidator控制項，其各屬性設定方法如下:
Control to Compare |
設定與其相比較的控制項 |
Control to Validate |
設定與其相關聯的控制項 |
Value to Compare |
設定相比較的值 |
Operator |
設定比較的關係(等於，不等於，大於，大於等於，小於，小於等於) |
Type |
比較的資料類型 |
Error Message |
顯示資訊 |
[圖5-11 CompareValidator設定對話方塊]
CustomValitor設定方法與其他控制項類似，但是需要手寫函數OnServerValidate(在Events中)來驗證資料。
[圖5-12CustomValitor設定對話方塊]
例如
< asp:CustomValidator id=”CusValid” runat=”server” ControlToValidate=控制項名 OnServerValidate=”TheFunction” >報錯資訊< / asp:CustomValidator >
< script language=”vb” runat=”server” >
Function TheFunction(sender as object,,value as string) as Boolean
……..
return …
End function
< /script >
此控制項會調用TheFuncion函數，如果返回false則會有報錯資訊。
RangeValidator控制項
[圖5-12 RangeValidatorr設定對話方塊]
可以通過Mininum Value(最小值)，Maxinum Value(最大值)來設定值的範圍。同時可以通過Type來設定比較的類型，例如”string”，”Integer”等。其他設定類似於其他組件的設定。
還有一個組件:ValidationSummary。其中HeaderText設定抬頭文字,DisplayMode設定顯示模式,其具體屬性如下:
屬性值 |
意義 |
List BulletList SingleParagraph |
ErrorMessage分行顯示 ErrorMessage分項顯示 ErrorMessage顯示成同一行 |
[圖5-13 ValidationSummary屬性設定對話方塊]
代附上主要程式段的原始碼:
< table width="75%" height="594" border="1" cellpadding="1" cellspacing="0" bordercolor="#999999" >
< tr >
< td width="22%" height="22" >First Name< /td >
< td width="38%" >< asp:textbox BackColor="#CCCCCC" ForeColor="#0033FF" ID="first" runat="server" TextMode="SingleLine" ToolTip="Please input the first name" MaxLength="40" BorderWidth="1" width="200"/ >< /td >
< td width="40%" >< asp:requiredfieldvalidator BackColor="#CCCCCC" ControlToValidate="first" ErrorMessage="RequiredField" ForeColor="#FF0000" ID="validname" runat="server" / > < /td >
< /tr >
< tr >
< td height="22" >Last Name< /td >
< td >< asp:textbox BackColor="#CCCCCC" ForeColor="#0033FF" ID="Lastname" runat="server" TextMode="SingleLine" Width="200" ToolTip="Please input the last name" BorderWidth="1"/ >< /td >
< td >< asp:requiredfieldvalidator BackColor="#CCCCCC" ControlToValidate="Lastname" ErrorMessage="RequiredField" ForeColor="#FF0000" ID="vailLast" runat="server" / > < /td >
< /tr >
< tr >
< td height="22" >Telephone< /td >
< td >< asp:textbox BackColor="#CCCCCC" BorderWidth="1" ForeColor="#0066FF" ID="telephone" runat="server" TextMode="SingleLine" ToolTip="Please input your telephone" Width="200" / >< /td >
< td > < asp:regularexpressionvalidator BackColor="#CCCCCC" ControlToValidate="telephone" ErrorMessage="7-10 numbers required" ForeColor="#FF0000" ID="vailtel" runat="server" ValidationExpression="[0-9]{7,10}" / > < asp:requiredfieldvalidator BackColor="#CCCCCC" ControlToValidate="telephone" ErrorMessage="RequiredField" ForeColor="#FF0000" ID="vailtel2" runat="server" / >< /td >
< /tr >
< tr >
< td height="22" >Email< /td >
< td >< asp:textbox BackColor="#CCCCCC" BorderWidth="1" ForeColor="#0033FF" ID="email" runat="server" TextMode="SingleLine" ToolTip="Please input your E-mail" width="200"/ >< /td >
< td >< asp:regularexpressionvalidator BackColor="#CCCCCC" ControlToValidate="email" ErrorMessage="Invaliate Email address" ForeColor="#FF0000" ID="valiemail" runat="server" ValidationExpression=".{1,}@.{3,}" / > < asp:requiredfieldvalidator BackColor="#CCCCCC" ControlToValidate="email" ErrorMessage="Required Field" ForeColor="#FF0000" ID="valiemail2" runat="server" / > < /td >
< /tr >
< tr >
< td height="22" colspan="3" >< div align="center" >Comments< /div >< /td >
< /tr >
< tr >
< td height="188" colspan="3" >< div align="center" >
< asp:textbox BackColor="#CCCCCC" BorderWidth="1" ForeColor="#0033FF" ID="Comments" Rows="16" runat="server" TextMode="MultiLine" ToolTip="Please input the Comments" width="400"/ >
< /div >
< div align="center" > < br >
< /div >< /td >
< /tr >
< tr >
< td height="71" colspan="3" >< div align="center" >
< asp:validationsummary BackColor="#CCCCCC" DisplayMode="BulletList" ForeColor="#FF0000" HeaderText="有誤的內容包括:" ID="valSum" runat="server" ToolTip="Error" / >
< /div >< /td >
< /tr >
< tr >
< td height="22" colspan="3" >< input type="submit" name="Submit" value="Submit" >
< /td >
< /tr >
< /table >
樣式如下:
[圖5-14 預覽]
STEP 3 資料添加
至於實現添加資料的功能就比較簡單，我們可以通過嚮導來設定添加資料的功能，並讓DreamweaverMX自動添加代碼。單擊Application中的Server Behaviors標籤，而後單擊+按鈕從中選擇Insert Record(如圖5-15)。
在彈出的對話方塊中首先要確定相連的資料來源。如果在列表中沒有找到，可以單擊Define按鈕設定資料來源(如圖5-16)。Insert into table用於設定需要添加資料的表,Columns中可以將文字框和對應的資料來源相對應，並設定資料類型。On success,Go To中是設定如果添加資料成功跳轉到的頁面。On Failure,Go To中可以設定添加資料失敗跳轉到到的頁面,同時我們也可以選擇Display Debugging Information On Failure設定在添加資料失敗顯示報錯資訊。
[圖5-15選擇Insert Record]
[圖5-16資料添加設定]
讓我們看看添加的代碼:
< MM:Insert
runat="server"
CommandText='< %# "INSERT INTO COMMENTS (COMMENTS, EMAIL, FIRST_NAME, LAST_NAME, TELEPHONE) VALUES (?, ?, ?, ?, ?)" % >'
ConnectionString='< %# System.Configuration.ConfigurationSettings.AppSettings("MM_CONNECTION_STRING_location") % >'
DatabaseType='< %# System.Configuration.ConfigurationSettings.AppSettings("MM_CONNECTION_DATABASETYPE_location") % >'
Expression='< %# Request.Form("MM_insert") = "form1" % >'
CreateDataSet="false"
SuccessURL='< %# "index.htm" % >'
FailureURL='< %# "reg.aspx" % >'
Debug="true"
>
< Parameters >
< Parameter Name="@COMMENTS" Value='< %# IIf((Request.Form("Comments") < > Nothing), Request.Form("Comments"), "") % >' Type="WChar" / >
< Parameter Name="@EMAIL" Value='< %# IIf((Request.Form("email") < > Nothing), Request.Form("email"), "") % >' Type="WChar" / >
< Parameter Name="@FIRST_NAME" Value='< %# IIf((Request.Form("first") < > Nothing), Request.Form("first"), "") % >' Type="WChar" / >
< Parameter Name="@LAST_NAME" Value='< %# IIf((Request.Form("Lastname") < > Nothing), Request.Form("Lastname"), "") % >' Type="WChar" / >
< Parameter Name="@TELEPHONE" Value='< %# IIf((Request.Form("telephone") < > Nothing), Request.Form("telephone"), "") % >' Type="WChar" / >
< /Parameters >
< /MM:Insert >
MM:Insert是Dreamweaver用於添加資料庫的標籤，Parameter就是用於指定參數的數值。
前面的代碼就是用於指定資料庫連結以及添加成功後跳轉到的頁面，添加失敗顯示錯誤資訊，還有相關聯的表格。
這些都是MacroMedia自己開發的，需要Macromedia的一些組件支援,與現在網上很多ASP.net的標準代碼格式不同。請大家參照代碼的時候不要根據此代碼而錯誤理解ASP.net的標準代碼格式。標準代碼格式大家可以參看www.gotdotnet.com。如果大家想寫標準的代碼，可以使用WebMatrix，下載地址: http://www.asp.net/webmatrix/download.aspx?tabindex=4
