Flex 捆绑式验证处理

Flex提供的默认的验证器，比如：日期验证器、货币验证器等都是基于单个属性值的，因此，一个复杂窗口如果需要多种验证的话，肯定会有多个验证器组合工作，方可实现验证效果。要实现多个验证器的验证效果，开发人员就不得不写代码去循环遍历各个验证器，逐个调用验证器的验证函数。本文提出了一种捆绑式的验证想法，其思路和实现大概如下：

1）开发一个自定义的验证容器组件，ValidateContainer；

ValidateContainer应该有一个验证序列属性，其类型假设是Array好了，那么可以在该Array里放置验证器的ID，需要验证的控件id。

2）调用ValidateContainer的validate函数，遍历验证序列的对象，对其逐一进行验证即可。

如此，开发人员只要在其程序里定义一个ValidateContainer，并设置其验证序列属性，然后调用ValidateContainer.validate函数即可实现捆绑式验证。

ValidateContainer核心代码如下：

package controls.validator { import mx.collections.ArrayCollection; import mx.controls.listClasses.AdvancedListBase; import mx.core.UIComponent; public class ValidatorContainer extends UIComponent { private var _validateList:Array=[]; public function ValidatorContainer() { } public function validate():Boolean{ 遍历validateList中的对象，并逐个验证，最终返回验证结果 } [Inspectable(category="Data", defaultValue="undefined")] /** * 验证序列，设置要验证的对象ID列表 */ public function get validateList():Array{ return _validateList; } public function set validateList(value:Array):void{ _validateList = value; } } }

使用如下：

<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" width="724" height="363" xmlns:datagrid=" controls.datagrid.*"> <fx:Script> <![CDATA[ import mx.collections.ArrayCollection; import mx.controls.Alert; import mx.validators.ValidationResult; [Bindable]private var dpFlat:ArrayCollection = new ArrayCollection([ {Region:"Southwest", Territory:"Arizona", Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000}, {Region:"Southwest", Territory:"Arizona", Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000}]); protected function btnValidate_clickHandler(event:MouseEvent):void { var result:Boolean = validatorContainer.validate(); if(result){ Alert.show("success"); } } ]]> </fx:Script> <mx:AdvancedDataGrid id="adg1" width="100%" height="100%" dataProvider="{dpFlat}" editable="true"> <mx:columns> <mx:AdvancedDataGridColumn dataField="Region"/> <datagrid: SelfColumn validType="email" dataField="Territory_Rep" id="emailCol"/> <mx:AdvancedDataGridColumn dataField="Actual"/> <datagrid:SelfColumn validType="number" dataField="Estimate" id="numberCol"> </mx:columns> </mx:AdvancedDataGrid> <s:Button id="btnValidate" label="validate" click="btnValidate_clickHandler(event)"/> <fx:Declarations> <validator:ValidatorContainer id="validatorContainer"> <validator:validateList> [numberCol,emailCol] </validator:validateList> </validator:ValidatorContainer> </fx:Declarations> </s:Application>

注意：单击validate按钮触发验证时，开发人员其实只调用validatorContainer.validate函数就同时实现了numberCol、emailCol的验证。