Flex 3 实用带验证码登陆实例

  
   首先看看效果：

  

Flash Player文件

点击打开/折叠播放器

  
  废话不多说，关键地方代码已有注解，这个登陆实例包括了一个mxml文件和一个as文件：

  LoginWithRandomNum.mxml代码如下：

  

  <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()" width="400" height="300"  borderColor="#0F222F">
<mx:Style>
  Alert{fontSize:12;}
</mx:Style>

<mx:Script>
    <![CDATA[
      //根据个人目录不同导入封装了随即元素生成的AS函式
      import myactionscript.randomNum;
      import mx.controls.Alert;
      var g_random:randomNum = new randomNum();
      var code:String;
      private function initApp():void
        {
          //显示校验码
          code=g_random.getRandomNum();
          TheCode.text=code;          
          TheCode.setStyle("color",g_random.randomColor());
        }
      
      private function CheckMsg():void
        {          
           if(user_name.text=="")
           {
             Alert.show("用户名不能为空");
           }
           else if(user_pwd.text=="")
           {
             Alert.show("密码不能为空");
           }
           else if(CodeTest.text=="")
           {
              Alert.show("请填写验证码，如看不清楚请点击提示文字重新生成！");
           }
           else if(CodeTest.text!=code&&CodeTest.text!=code.toLowerCase())
           {
              Alert.show("验证码不正确，请重新填写！");
              initApp();
           }
           else
           {
             Alert.show("Success!");
           }
            
        }
        
         private function RESET():void
         {
           user_name.text="";
           user_pwd.text="";
           CodeTest.text="";
           initApp();
         }
    
    ]]>

</mx:Script>

  <mx:Panel x="25.5" y="23" width="349" height="257" layout="absolute" title="用户登录" fontFamily="Georgia" fontSize="12" id="panel1" borderColor="#1576EF">
    <!--  "用户名"标签  -->
    <mx:Label x="41.5" y="33" text="用户名" fontWeight="bold"/>
    <!--  "密码"标签  -->  
    <mx:Label x="42.5" y="81" text="密码" fontWeight="bold"/>
    <!--  "用户名"输入框  -->    
    <mx:TextInput x="94.5" y="33" id="user_name"/>  
    <!--  "密码"输入框  -->
    <mx:TextInput x="95.5" y="81" id="user_pwd" displayAsPassword="true"/>
    <!--  "登录"按钮  -->
    <mx:Button x="82.5" y="159" label="登录" id="btnLogin" click="CheckMsg()"/>
        <!--  "重置"按钮  -->
    <mx:Button x="181.5" y="159" label="重置" id="btnReset" click="RESET()" />
    <!--  "校验码"标签  -->
    <mx:Label x="165.5" y="125" id="TheCode" width="50"  fontFamily="Georgia"  fontWeight="bold"/>
    <mx:LinkButton x="216" y="123" label="看不清楚点这里" click="initApp()" id="recode"   fontFamily="Georgia" fontSize="12" fontWeight="bold"/>
    <mx:Label x="39.5" y="123" text="校验码" fontWeight="bold"/>
    <!--  "校验码"输入框  -->
    <mx:TextInput x="96.5" y="121" id="CodeTest" width="61" maxChars="4"/>
  </mx:Panel>
  <mx:Label text="实用型带验证码登陆实例 By GMC_KR" x="94" y="0" color="#030303" fontSize="12"/>
</mx:Application>

 

 

package myactionscript
{
  public class randomNum
  {
    public function getRandomNum():String
    {
      var ran1:Number;
      var ran2:Number;
      var code:String;
      var returnCode:String;
      
      //循环生成4位随机数；
      for (var i:int=0;i<4;i++)
      {
         ran1=produceRandom();        
        
         //单数情况下生成一个字母
         if(ran1%2==0)
         {
            ran2=produceRandom();          
            code=String.fromCharCode(65+(ran2%26));
                        
         }
        
         //双数情况下生成随即数字
         else
         {
                ran2=produceRandom();
                code=String.fromCharCode(48+(ran2%10));    
         }
         if(returnCode==null)
         {
          returnCode=code
         }
         else{  
         returnCode+=code;        
         }
      }
         return returnCode;
        
    }
    
    //随机生成带“#”号的6位16进制颜色代码；
    public function randomColor():String
    {
      var color:String;
      var rnum:Number;
      var cnum:String="#";
      for (var i:int=0;i<6;i++)
      {
        rnum=produceRandom();
        rnum=rnum%16;
        if(rnum<=9)
        {
         cnum+=String.fromCharCode(48+rnum);      
        }
        else
        {
         cnum+=String.fromCharCode(97+rnum-10);
        }
      }
        return cnum;
    }
    
    
    public function produceRandom():Number
    {
      var num:Number;
      num=Math.random();
      num=Math.round(num*10000000);
      return num;
    }

  }
}