zoukankan      html  css  js  c++  java
  • Flex2 数据的验证方法以及如何改变错误提示的CSS

    Flex2开发项目中经常需要验证用户输入,Flex2自身为我们提供丰富的组件。
    下面的例子我们实现了如下一些特性:
    1)数据集中验证
    2)定位光标到第一个验证失败的位置
    3)错误提示中中文显示的CSS

    <?xml version="1.0"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*" creationComplete="initValidatorArray();" width="402" height="152"> 
        
    <mx:Script>
        
    <![CDATA[
            import mx.events.ValidationResultEvent;
            import mx.core.UIComponent;
            import mx.controls.Alert;
            import mx.validators.*;
            private var myValidators:Array;
            
            private function initValidatorArray():void {
                myValidators=[zipV, pnV];
            }
            //按钮事件,检测通过执行操作
            private function btnValidate_Click(event:Event):void{
                var validatorResults:Array = mx.validators.Validator.validateAll(myValidators);
                //长度为0表示所有验证通过
                if(validatorResults.length == 0){
                    mx.controls.Alert.show("Validate OK!");
                }else{
                    //将光标定位到第一个错误
                    var v:ValidationResultEvent = validatorResults[0] as ValidationResultEvent;
                    (v.target.source as UIComponent).setFocus();
                }
            }
        
    ]]>
        
    </mx:Script>
        
        
    <!--如果你要在验证错误提示中显示中文,使用这个改变字体大小!-->
        
    <mx:Style>
           .errorTip {fontFamily:"simsun"; fontSize:"12"}        
        
    </mx:Style>
        
        
    <mx:ZipCodeValidator id="zipV" source="{zipCodeInput}" property="text" requiredFieldError="邮编必须填写"/>
        
    <mx:PhoneNumberValidator id="pnV" source ="{phoneNumberInput}" property="text" />
        
    <mx:Form x="24" y="24">
            
    <mx:FormItem label="zip Code:" required="true">
                
    <mx:TextInput id="zipCodeInput"/>
            
    </mx:FormItem>
            
    <mx:FormItem label="phone Number:" required="true">
                
    <mx:TextInput id="phoneNumberInput"/>
            
    </mx:FormItem>
        
    </mx:Form>
        
    <mx:Button label="Validate" click="btnValidate_Click(event)"/> 
    </mx:Application> 


    示例:


  • 相关阅读:
    《架构之美》读后感(二)
    《架构之美》读后感(一)
    《代码大全2》阅读笔记03
    《代码大全2》阅读笔记02
    《代码大全2》阅读笔记01
    学习进度报告(十四)
    软件方法阅读笔记03
    第二讲
    1.26 十讲第一讲
    1.23
  • 原文地址:https://www.cnblogs.com/mobile/p/600154.html
Copyright © 2011-2022 走看看