当前位置: 代码迷 >> Web前端 >> 通用的表单印证组件
  详细解决方案

通用的表单印证组件

热度:109   发布时间:2012-10-28 09:54:44.0
通用的表单验证组件
一个通用的表单验证组件,可以根据验证类型自行扩展,可以被动验证和主动验证。需要用到方法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>

视图:

  相关解决方案