一个通用的表单验证组件,可以根据验证类型自行扩展,可以被动验证和主动验证。需要用到方法ParamUtil.setParam(已贴出)
组件代码:
package pizazz.flex4.manager{ import flash.events.Event; import flash.events.MouseEvent; import mx.controls.Alert; import mx.events.ValidationResultEvent; import mx.validators.EmailValidator; import mx.validators.NumberValidator; import mx.validators.StringValidator; import mx.validators.Validator; import pizazz.flex4.utility.ParamUtil; import spark.components.Button; public class Validators{ private var _btn:Button; private var _isClick:Boolean = false; private var _allV:Array; private var _strV:StringValidator; private var _numV:NumberValidator; private var _emailV:EmailValidator; public function Validators(btn:Button = null){ if(btn){ _btn = btn; _isClick = true; } _allV = new Array(); } public function setOtherValidator(param:Validator):void{ _allV.push(param); } private function common(param:Validator, item:Object):void{ param.source = item["source"]; param.property = item["property"]; if (_isClick){ param.trigger = _btn; param.triggerEvent = MouseEvent.CLICK; } _allV.push(param); } public function valString2Text(event:Event, isNull:Boolean = false, nullMsg:String = null, minNum:Object = NaN, maxNum:Object = NaN, minMsg:String = null, maxMsg:String = null):void{ _strV = new StringValidator(); ParamUtil.setParam(_strV, { "required": !isNull, "requiredFieldError": nullMsg, "minLength": minNum, "maxLength": maxNum, "tooShortError": minMsg, "tooLongError": maxMsg }); common(_strV, {"source": event.target, "property": "text"}); } public function valNumber2Text(event:Event, isNull:Boolean = false, nullMsg:String = null, minNum:Object = NaN, maxNum:Object = NaN):void{ _numV = new NumberValidator(); ParamUtil.setParam(_numV, { "required": !isNull, "minValue": minNum, "maxValue": maxNum, "requiredFieldError": nullMsg }); common(_numV, {"source": event.target, "property": "text"}); } public function valEmail2Text(event:Event, isNull:Boolean = false, nullMsg:String = null):void{ _emailV = new EmailValidator() ParamUtil.setParam(_emailV, { "required": !isNull, "requiredFieldError": nullMsg }); common(_emailV, {"source": event.target, "property": "text"}); } public function submitValidator(msg:String = ""):Boolean{ var _arr:Array = Validator.validateAll(_allV); if (_arr.length != 0){ if(msg == ""){ msg = "请确认输入的正确性和完整性"; } Alert.show(msg); return false; } return true; } } }
组件执行:
<?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:component="pizazz.flex4.component.*" minWidth="955" minHeight="600"> <s:layout> <s:VerticalLayout /> </s:layout> <fx:Script> <![CDATA[ import mx.controls.Alert; import pizazz.flex4.manager.Validators; private const val:Validators = new Validators(); private function submit():void{ if(val.submitValidator()){ Alert.show("提交成功"); } } ]]> </fx:Script> <mx:Form width="320" height="240"> <s:HGroup width="100%"> <mx:FormHeading label="表单" width="100%" /> <s:Button label="提交" click="submit()" /> </s:HGroup> <mx:FormItem width="100%" label="名称" required="true"> <s:TextInput width="100%" creationComplete="val.valString2Text(event, false, null, 1, 5)" /> </mx:FormItem> <mx:FormItem width="100%" label="年龄"> <s:TextInput width="100%" creationComplete="val.valNumber2Text(event, true)" /> </mx:FormItem> <mx:FormItem width="100%" label="E-mail" required="true"> <s:TextInput width="100%" creationComplete="val.valEmail2Text(event)" /> </mx:FormItem> </mx:Form> </s:Application>
视图: