Spry元件包含下列部分：
- 結構：HTML程式碼區塊, 用來定義元件的結構成份。
- 行為：JavaScript, 用來控制元件要以何種方式回應由使用者起始的事件。
- 樣式：CSS, 用來指定元件的外觀。
Spry元件依其功能可分為三部分：
- AJAX動態資料：從資料來源(例如XML檔或HTML檔)取得解析與存放資料, 並以動態方式設定網頁頁面中特定區域的內容。
- 互動特效介面：包含「選單列」、「標籤面板」、「摺疊面板」、「可收合面板」、「工具提示」等, 可製作濾鏡與動態效果的各式選單。
- 表單欄位驗證：用於驗證表單中的欄位是否填入資料, 以及驗證填入的欄位資料格式是否正確。
本節將以上一節中已完成CSS樣式套用後的表單（cssForm.htm）為基礎, 為文字欄位加上表單欄位驗證的Spry元件。
[Spry驗證文字欄位]
當使用者在表單填寫資料, 有些欄位是希望使用者一定要填寫的（必要欄位）, 已本來來說, 筆者希望「姓名」欄位使用者一定要填寫, 此時即可利用「Spry驗證文字欄位」。
1. 點選「姓名」文字欄位, 然後按下工具列【Spry】頁籤中的「Spry驗證文字欄位」工具按鈕。
2. 加入Spry文字欄位後, 屬性面板將顯示對應的Spry驗證文字欄位屬性, 在面板中可設定資料驗證類型、資料驗證時機、格式…等。
當「預覽狀態」選定為「必要項」後, 「驗證於」欄位的『onSubmit』將會自動核取且不可取消。
- onSubmit：當表單資料送交時執行驗證。
- onChange：當欄位內容改變（資料異動）時執行驗證。
- onBlue：當欄位失去操作焦點, 也就是在輸入欄位資料後, 點選其他欄位或按下Tab鍵進行欄位切換時執行驗證。
3. 雙擊驗證欄位的提示訊息, 修改預設的提示內容（需要有一個值）, 此提示內容會在欄位資料驗證不通過時自動出現, 一般狀況下並不會出現。
4. 點選「Spry文字欄位」, 進行輸入資料的字數設定, 例如限定輸入字數不得超過20個字且不得少於2個字。
沒有留言:
張貼留言