一个通用的表单验证组件,可以根据验证类型自行扩展,可以被动验证和主动验证。需要用到方法ParamUtil.setParam(已贴出)
组件代码:
组件执行:
视图:
[img]http://dl.iteye.com/upload/attachment/345044/33dd4d33-9689-31c4-955a-553d94ab3793.png[/img]
组件代码:
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>
视图:
[img]http://dl.iteye.com/upload/attachment/345044/33dd4d33-9689-31c4-955a-553d94ab3793.png[/img]