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