当前位置: 代码迷 >> Web前端 >> Validator应用
  详细解决方案

Validator应用

热度:522   发布时间:2012-10-09 10:21:45.0
Validator使用
来自JavaCrazyer的文章
http://javacrazyer.iteye.com/blog/699305

关于Flex4的验证,有好几种,主要包括DateValidtor,EmailValidator,NumberValidator,StringValidator等等,具体每一项的验证可以参考那个AIR桌面程序


贴上主要验证代码
validatorForm.mxml
Xml代码
<span style="font-size: medium;"><?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"   
               skinClass="components.TDFPanelSkin"  
        >  
      
    <fx:Script>  
        <![CDATA[ 
            import components.TDFPanelSkin; 
             
            import mx.controls.Alert; 
            import mx.events.ValidationResultEvent; 
            import mx.validators.Validator; 
             
            //单独验证某一项 
            function validateAge():void{ 
             var vd:ValidationResultEvent=numVD.validate(); 
             
            } 
             
            //执行所有验证的验证 
            function vaidateForm():void{ 
             var all:Array=Validator.validateAll([numVD,dateVD,emailVD]); 
 if(all.length==0){ 
                 Alert.show("验证成功"); 
                 //这里可以发送请求进行表单提交任务 
                } 
             
            } 
             
             
            //NumberValidator中要么使用triggerEvent='click'不用调用任何方法,要么就triggerEven="",在textInput中调用validate方法 
        ]]>  
    </fx:Script>  
  
    <s:layout>  
        <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />  
    </s:layout>  
      
    <fx:Declarations>  
        <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" >  
          
        <s:layout>  
            <s:HorizontalLayout horizontalAlign="center"   
                                paddingLeft="10" paddingRight="10"   
                                paddingTop="10" paddingBottom="10"/>  
        </s:layout>  
          
        <mx:Form color="0x323232">  
            <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>  
</span>  
 



每一项不符合要求时,点击验证按钮,在回到输入框中,后面都会出现相应的错误的提示,直到输入成功为止
  相关解决方案