前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Flex2 数据的验证方法以及如何改变错误提示的CSS

Flex2 数据的验证方法以及如何改变错误提示的CSS

作者头像
用户3135539
发布2018-09-12 11:39:58
5120
发布2018-09-12 11:39:58
举报
文章被收录于专栏:

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

代码语言:javascript
复制
<?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>

示例:

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2006-12-22 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档