Flex 的驗證控制項及其在動態產生頁面情況下的使用

Flex的mx.validators包中包含了用於資料驗證的類。在這裡提供了字串驗證類、日期驗證類、數字驗證類、郵箱驗證類、電話號碼驗證類以及Regex驗證類等等。利用它可以較方便實現Flex前段驗證。

在表單中事先建立一個Validator數組，儲存驗證各類資訊的驗證類，而後將這些驗證類分別指定到要驗證的控制項上，其後調用所有驗證類的基類Validator的validateAll方法驗證所有控制項資訊。

如下展示了驗證類的數組形式：

  

  <mx:Array id="validators"> <mx:StringValidator id="title_v" source="{title_input}" property="text" required="true" maxLength="500" tooLongError="最大長度為500"               trigger="{update_Btn}" triggerEvent="click"/>        <mx:RegExpValidator id="keyword_regV"        expression="{'^[\\S\u4e00-\u9fa5]*(\\s[\\S\u4e00-\u9fa5]+)*$'}"            source="{keyword_input}" property="text" required="false"            trigger="{update_Btn}" triggerEvent="click"            noMatchError="多個關鍵詞之間以一個空格符分隔"/>                <mx:DateValidator id="editDate_v" source="{editDate_date}"            property="text" required="true" inputFormat="YYYY-MM-DD"            trigger="{update_Btn}" triggerEvent="click"/>               <mx:NumberValidator id="pages_v" source="{pages_num}" property="value"            required="true" allowNegative="false" domain="int"            trigger="{update_Btn}" triggerEvent="click"/></mx:Array>

這些驗證控制項分別對應驗證不同控制項資訊，如下所示：

 

<mx:Canvas width="100%" height="65%" verticalScrollPolicy="auto">                <mx:Form><mx:FormItem label="">                          <mx:TextInput id="title_input" text=""/>                      </mx:FormItem><mx:FormItem label="">                        <mx:TextInput id="keyword_input" text="" />                    </mx:FormItem><mx:FormItem label=" " required="true">                        <mx:DateField id="editDate_date"                            text=""                            yearNavigationEnabled="true"                            formatString="YYYY-MM-DD"                            />                    </mx:FormItem><mx:FormItem label=" " required="true">                        <mx:NumericStepper id="pages_num"                            value=""                            maximum="999" minimum="0"/>                    </mx:FormItem>                </mx:Form>            </mx:Canvas>

  <mx:Button id="update_Btn" label="" click="validate()"/> 

上述驗證類通過source屬性綁定到待驗證的控制項id，從而進行驗證，驗證過程只需要調用基類的validateAll即可完成全部驗證。上述驗證類已通過trigger 屬性指定了觸發驗證的按鈕及相應事件，在按鈕相應的click方法(validate())裡調用Validator.validateAll(validators)即可完成驗證，它返回每個驗證控制項的驗證結果數組（數組中包含ValidationResultEvent，如果全部驗證正確的話，則數組為空白）。

 

在表現層，一些需求其介面元素是靜態，另一些則要求能夠動態構建表單。而flex的mxml中也可以由actionScript指令碼完成一些動態實現。例如這種驗證是的，我們可以在mxml中預設一下驗證類的數組，和資料控制項的載體，也可以完全動態建立，此次預先放置，僅展示動態利用驗證控制項驗證。

首先要定義一個數組   <mx:Array id="validators"></mx:Array>而後定義資料控制項的容器<mx:Canvas width="100%" height="65%" verticalScrollPolicy="auto">                <mx:Form id="dynamicForm">                </mx:Form></mx:Canvas>最後在as指令碼中動態建立資料控制項和驗證類var df:DateField = new DateField();df.text =””;df.yearNavigationEnabled = true;df.formatString = "YYYY-MM-DD";df.id = "date_";//建立驗證var dv:DateValidator = new DateValidator();dv.source = df;dv.property = "text";dv.inputFormat = "YYYY-MM-DD";dv.trigger = update_Btn;dv.triggerEvent = "click";validators.push(dv);

做為富用戶端的表現技術，flex同樣可靜可動，同樣提供了大批的組件或架構，例如驗證架構，而這也是學習每種視圖技術要理解和歸納的部分，要明白如何利用它的各類組件以及靜動兩個方向學一下其使用。