網頁

2010年7月16日 星期五

Flex_如何驗證表單輸入(Validator)

在Flex裡面有一個form容器可以很輕易的做出表單,提供了簡單的排版,或是可以幫必填欄位加上星號,而老師的書裡面都有很詳盡的說明了。

但是寫過表單的都知道,使用者一定會亂輸入、使用者一定會都不填就想送出、很容易就因為很鳥的事情有問題。好!所以一定要做驗證,那做驗證有幾個關卡:
1. 使用者輸入做驗證
2. 程式收到輸入後,寫入資料庫前做驗證
3. 寫進資料庫時做驗證
有玩過即時戰略的都知道,大門守好先贏一半!而Flex是前端的程式,也主要做第一個使用者輸入驗證。

要進行驗證需要藉由Validator系列才能完成,Validator這一個基本驗證主要有五個屬性:
1. source="{this.text1}" -------要驗證哪一個物件。
2. property="text"--------------驗證這個物件的哪個屬性。
3. requiredFieldError="沒填!" --驗證錯誤時要出現的警告文字。
4. trigger="{this.btn_login}" --以哪個物件來觸發這一個驗證,預設為取得焦點又失去焦點時。
5. triggerEvent="click"---------觸發的驗證的事件。
所以,就可以獲得一個在btn_login執行click事件時,去檢查text1的text屬性是否有填寫的驗證。

看到上圖,通常都會有一個問題,這個提示字不能變大嗎?因為Flex預設的字體大小為10,所以通常我們都會希望字變的大一點,方法就是透過Css設定:


最後,我們可能不知道內建的驗證到底有哪幾種,就可以利用import mx.Validator來看一下裡面的內容:


不夠用?可以繼承Validator,自定屬於自己的好用驗證。

沒有留言:

張貼留言