DreamwaverMX與ASP.NET(五)

來設定輸入框來輸入資料。 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}

其文法如下:

[]：用來定義可接受的字符，如az表示小寫的'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控件，其各屬性設定方法如下: