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的验证。