DW_PHP_AJAX_CH3 表單的設計與規劃_(4)使用Spry元件驗證欄位_下

[驗證Email格式]

希望使用者留下聯絡的電子信箱, 卻擔心使用者填寫了錯誤格式的郵件地址, 別擔心, 「Spry驗證文字欄位」也具由電子信箱、身分證字號…等具有特定格式的資料驗證功能。

1. 點選「信箱」文字欄位, 然後按下工具列【Spry】頁籤中的「Spry驗證文字欄位」工具按鈕, 加入Spry文字欄位。
2. 加入Spry文字欄位後, 屬性面板將顯示對應的Spry驗證文字欄位屬性, 選定「類型」為『電子郵件地址』, 若要執行即時驗證（資料輸入後,表單資料送出前）, 請同時核取「驗證於」欄位的『onBlur』項目, 最後修改執行驗證不通過時的提示訊息。

DW_PHP_AJAX_CH3 表單的設計與規劃_(4)使用Spry元件驗證欄位_上

Spry元件是一種頁面元素, 透過Spry元件可使頁面與使用者產生互動, 提供更友善的使用者經驗。

Spry元件包含下列部分：

• 結構：HTML程式碼區塊, 用來定義元件的結構成份。
• 行為：JavaScript, 用來控制元件要以何種方式回應由使用者起始的事件。
• 樣式：CSS, 用來指定元件的外觀。

Spry元件依其功能可分為三部分：

• AJAX動態資料：從資料來源(例如XML檔或HTML檔)取得解析與存放資料, 並以動態方式設定網頁頁面中特定區域的內容。
• 互動特效介面：包含「選單列」、「標籤面板」、「摺疊面板」、「可收合面板」、「工具提示」等, 可製作濾鏡與動態效果的各式選單。
• 表單欄位驗證：用於驗證表單中的欄位是否填入資料, 以及驗證填入的欄位資料格式是否正確。

DW_PHP_AJAX_CH3 表單的設計與規劃_(3)CSS樣式設定_樣式檔設定

1.點選主功能表【視窗】/【CSS樣式】, 或是直接按下 Shift+F11快速鍵, 開啟「CSS樣式」面板。
2.按下面板最下方的附加樣式表按鈕, 在「附加外部樣式檔」對話框中進行外部CSS樣式檔的連結設定。