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同样可静可动，同样提供了大批的组件或框架，例如验证框架，而这也是学习每种视图技术要理解和归纳的部分，要明白如何利用它的各类组件以及静动两个方向学一下其使用。