Flex 的验证控件及其在动态生成页面情况下的使用

Flex的mx.validators包中包含了用于数据验证的类。在这里提供了字符串验证类、日期验证类、数字验证类、邮箱验证类、电话号码验证类以及正则表达式验证类等等。利用它可以较方便实现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同样可静可动，同样提供了大批的组件或框架，例如验证框架，而这也是学习每种视图技术要理解和归纳的部分，要明白如何利用它的各类组件以及静动两个方向学一下其使用。