带验证码的Flex登录窗口实例代码

最新推荐文章于 2021-08-30 09:53:12 发布
转载最新推荐文章于 2021-08-30 09:53:12 发布 · 5.6k 阅读
文章标签：
#flex #layout #application #string #encoding #blog
Flex技术专栏收录该内容
21 篇文章
订阅专栏
如果您喜欢这些文章，欢迎点击此处订阅本Blog title="RSS 2.0" type="application/rss+xml" href="http://feed.feedsky.com/softwave" rel="alternate">
 <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()">
    <mx:states>
        <!--新建“index”State-->
        <mx:State name="index">
            <!--移除“登录框”-->
            <mx:RemoveChild target="{panel1}"/>
            <!--添加新的组件-->
            <mx:AddChild position="lastChild">
                <mx:Label x="231" y="174" text="欢迎来到主页" fontFamily="Georgia" fontSize="20" />
            </mx:AddChild>
        </mx:State>
    </mx:states>
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            private function initApp():void
            {
                //显示校验码
               lblCheckCode.text=GenerateCheckCode(); 
            }
            private function loginHandle():void
            {
                //空的情况
                if(txtUsername.text==""||txtPassword.text=="")
                {
                    Alert.show("请输入完整数据!");
                }
                else
                {
                    //合法用户
                    if(txtUsername.text=="Administrator"&&txtPassword.text=="123456"&&txtCheckCode.text.toLocaleLowerCase()==lblCheckCode.text.toLowerCase())
                    {
                        currentState="index";
                    }
                    //登录失败
                    else  
                    {
                        //校验码错误
                        if(txtCheckCode.text.toLowerCase()!=lblCheckCode.text.toLowerCase()) 
                        {
                           Alert.show("校验码错误!");
                           //重新生成校验码
                           lblCheckCode.text=GenerateCheckCode(); 
                        }
                        //用户名或密码错误
                        else  
                          Alert.show("用户名或密码错误!");
                    }
                }
            }
            private function resetHandle():void
            {
                txtUsername.text="";
                txtPassword.text="";
                txtCheckCode.text="";
            }
 
            //生成随机码
            private function GenerateCheckCode():String
            {
                //初始化
                var ran:Number;
                var number:Number;
                var  code:String;
                var checkCode:String ="";
                //生成四位随机数
                for(var i:int=0; i<4; i++)
                {
                    //Math.random生成数为类似为0.1234
                    ran=Math.random();
                    number =Math.round(ran*10000); 
                    //如果是2的倍数生成一个数字
                    if(number % 2 == 0)
                      //"0"的ASCII码是48  
                      code = String.fromCharCode(48+(number % 10)); 
                    //生成一个字母
                    else  
                      //"A"的ASCII码为65
                      code = String.fromCharCode(65+(number % 26)) ;
                    checkCode += code;
                }
                return checkCode;
            }
 
        ]]>
    </mx:Script>
    <mx:Panel x="337.5" y="261" width="349" height="257" layout="absolute" title="用户登录" fontFamily="Georgia" fontSize="12" id="panel1">
        <!--  "用户名"标签  -->
        <mx:Label x="41.5" y="33" text="用户名"/> 
        <!--  "密码"标签  -->   
        <mx:Label x="42.5" y="81" text="密码"/> 
        <!--  "用户名"输入框  -->    
        <mx:TextInput x="94.5" y="33" id="txtUsername"/>  
        <!--  "密码"输入框  -->
        <mx:TextInput x="95.5" y="81" id="txtPassword" displayAsPassword="true"/>
        <!--  "登录"按钮  --> 
        <mx:Button x="82.5" y="159" label="登录" id="btnLogin" click="loginHandle()"/> 
        <!--  "重置"按钮  --> 
        <mx:Button x="181.5" y="159" label="重置" id="btnReset" click="resetHandle()"/> 
        <!--  "校验码"标签  --> 
        <mx:Label x="165.5" y="125" id="lblCheckCode" width="42.5" color="#377CD0"/>
        <mx:LinkButton x="216" y="123" label="看不清楚?" id="linkbtnReGenerate" click="lblCheckCode.text=GenerateCheckCode();" fontFamily="Georgia" fontSize="11"/>
        <mx:Label x="39.5" y="123" text="校验码"/>
        <!--  "校验码"输入框  --> 
        <mx:TextInput x="96.5" y="121" id="txtCheckCode" width="61" maxChars="4"/>
    </mx:Panel>
</mx:Application>
转自： http://www.joelove.cn/