Flex4表单验证
这里主要讲Combox的验证。其他几个略带说说。
?
?
Combox的AS代码：
package oreilly.cookbook{import mx.validators.ValidationResult;import mx.validators.Validator;public class ComboValidator extends Validator{// 如果ComboBox中没有项目被选中, 则返回这个错误信息public var error:String;//如果开发者把一个自定义的项目推进ComboBox的数组中(这种情况我见过不少)//我们就会把这个项跟已选取的项进行对比。public var prompt:String;public function ComboValidator() {super();}//在这里我们进行两个检查://1. comboBox中有没有项目被选中//2. 开发者有没有为comboBox加入自定义的项目//任何一个条件为ture的话, 则返回一个错误override protected function doValidation(value:Object):Array{var results:Array = [];if(value as String == prompt || value == null) {var res:ValidationResult = new ValidationResult(true, "", "", error);results.push(res);}return results;}}}?
主程序MXML
<?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" xmlns:cookbook="oreilly.cookbook.*"><s:layout><s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" /></s:layout><fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/mx"; .errorTip { fontSize:16; } mx|Alert{ fontSize:16; } </fx:Style><fx:Script><![CDATA[import mx.collections.ArrayCollection;import mx.controls.Alert;import mx.events.ValidationResultEvent;import mx.validators.Validator;var data:ArrayCollection = new ArrayCollection(["省份","地区","邮编","区号"]) ;//单独验证某一项function validateAge():void{var vd:ValidationResultEvent=numVD.validate();}//执行所有验证的验证function vaidateForm():void{var all:Array=Validator.validateAll([numVD,dateVD,emailVD,comboValidator]);if(all.length==0){Alert.show("验证成功");//这里可以发送请求进行表单提交任务}}//NumberValidator中要么使用triggerEvent='click'不用调用任何方法，要么就triggerEven="",在textInput中调用validate方法]]></fx:Script><fx:Declarations><cookbook:ComboValidator prompt="myCombox" id="comboValidator" error="请选择一项" source="{myCombox}" property="selectedItem"/> <mx:NumberValidator id="numVD" source="{age}" property="text" integerError="Enter Integer value"minValue="18" maxValue="50" domain="int" trigger="{myButton}" triggerEvent=""valid="Alert.show('numValidation Succeeded!');"/><mx:DateValidator id="dateVD" source="{mydate}" property="text" allowedFormatChars="/" trigger="{myButton}" triggerEvent="click" valid="Alert.show('Validation Succeeded!');"/><mx:EmailValidator id="emailVD" source="{email}" triggerEvent="" property="text"/></fx:Declarations><s:Panel title="NumberValidator Example" width="600" height="100%" color="0x000000" borderAlpha="0.15" ><mx:Form color="0x323232"><mx:FormItem label="address"><s:ComboBox id="myCombox" height="40" width="100%" fontSize="18" dataProvider="{data}"/></mx:FormItem><mx:FormItem label="age"><s:TextInput id="age" height="40" width="100%" fontSize="18"/></mx:FormItem><mx:FormItem label="date【mm/dd/yyyy】"><s:TextInput id="mydate" height="40" width="100%" fontSize="18"/></mx:FormItem><mx:FormItem label="email"><s:TextInput id="email" height="40" width="100%" fontSize="18"/></mx:FormItem><mx:FormItem ><s:Button id="myButton" label="Validate" click="vaidateForm()" /></mx:FormItem></mx:Form></s:Panel></s:Application>?