Flex 带验证码的登陆页面

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="initApp()">
 <mx:states>
  <mx:State name="index">
   <mx:RemoveChild target="{loginPanel}"/>
   <mx:AddChild position="lastChild">
   <mx:Label 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("用户名或者密码输入不完整!");
    }
    if(txtUsername.text=="admin" && txtPassword.text=="admin" && txtCheckCode.text.toLocaleLowerCase()==lblCheckCode.text.toLocaleLowerCase()){
     currentState="index";
    }else{
     if(txtCheckCode.text.toLocaleLowerCase()!=lblCheckCode.text.toLocaleLowerCase()){
      Alert.show("验证码不正确！");
      lblCheckCode.text=GenerateCheckCode();
      txtCheckCode.text="";
     }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++){
     ran=Math.random();
     number=Math.round(ran*1000);
     if(number%2==0){
      code=String.fromCharCode(48+(number%10));
     }else{
      code=String.fromCharCode(65+(number%26));
      
     }
     checkcode+=code;
    }
    return checkcode;
   }
  ]]>
 </mx:Script>
 <mx:Panel width="349" height="226" layout="absolute" title="用户登录" fontSize="12" fontFamily="Georgia" id="loginPanel">
  <mx:Label x="10" y="10" text="用户名：" id="username"/>
  <mx:Label x="10" y="50" text="密　码：" id="pwd"/>
  <mx:Label x="10" y="90" text="校验码："/>
  <mx:LinkButton x="211" y="94" label="看不清楚？" id="linkbtnReGenerate" click="lblCheckCode.text=GenerateCheckCode();" fontSize="11"/>
  <mx:TextInput x="71" y="10" id="txtUsername"/>
  <mx:TextInput x="71" y="50" id="txtPassword" displayAsPassword="true"/>
  <mx:TextInput x="71" y="93" width="83" id="txtCheckCode" maxChars="4"/>
  <mx:Button x="71" label="登录" id="btnLogin" click="loginHandle()" bottom="20"/>
  <mx:Button x="179" label="重置" click="resetHandle()" id="btnReset" bottom="20"/>
  
  <mx:Label x="162" y="95" width="50" id="lblCheckCode"  color="#377CD0" />
 </mx:Panel>
 
</mx:Application>