用flash builder4做一个带验证码的用户登录框

1、用panel,label,button,textinput组建布局，如下图：

 

2、设用户名、密码、验证码所对应的textinput的id分别为userName、pasWord、inVal;设用于显示验证码的label组建的id为：val.

     布局代码如下：

 

 
  
  
  
  
  
  
  
  
  
  
 

 

3、生成4位随机数：

  protected function valdetorNumber():String
   {
    var digtal1:Number;
    var digtal2:Number;
    var str1:Number;
    var str2:Number;
    var code:String;
    digtal1=Math.random()*10;
    digtal2=Math.random()*10;
    str1=Math.random()*26;
    str2=Math.random()*26;
    code=String.fromCharCode(65+str1)+String.fromCharCode(48+digtal1)
         +String.fromCharCode(65+str2)+String.fromCharCode(48+digtal2);
    
    return code;
   }

 4、将随机数绑定到val：

 

protected function initApp():void
   {
    val.text=valdetorNumber();
   }

 

5、网页加载时运行initApp()函数：

  xmlns:s="library://ns.adobe.com/flex/spark"
 xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
 creationComplete="initApp()">
 

6、为提交按钮添加click脚本：

 

 protected function button1_clickHandler(event:MouseEvent):void
   {
    if(userName.text==""||pasWord.text=="")
    {
     Alert.show("输入不完整！","提示");
    }else{
    if(userName.text=="bobozai"&&pasWord.text=="1120"&&inVal.text.toLocaleLowerCase()==val.text.toLocaleLowerCase())
    {
          currentState="index";
    }else{
       if(inVal.text!=val.text)
    {
     Alert.show("验证码错误！","提示");
      
    }else{
        Alert.show("用户名和密码不匹配！","提示");
    }
    }
     }
    
   }

 7、为重设添加click脚本：

 

 

 

 protected function button2_clickHandler(event:MouseEvent):void
   {
    userName.text="";
    pasWord.text="";
    inVal.text="";
   }

 

 8、为换按钮添加click脚本：

 

 

protected function button3_clickHandler(event:MouseEvent):void
   {
    valdetorNumber();
    initApp();
   }

 

 所有代码如下：

 

 xmlns:s="library://ns.adobe.com/flex/spark"
 xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
 creationComplete="initApp()">

 
     import mx.controls.Alert;
   protected function initApp():void
   {
    val.text=valdetorNumber();
   }
   protected function button1_clickHandler(event:MouseEvent):void
   {
    if(userName.text==""||pasWord.text=="")
    {
     Alert.show("输入不完整！","提示");
    }else{
    if(userName.text=="bobozai"&&pasWord.text=="1120"&&inVal.text.toLocaleLowerCase()==val.text.toLocaleLowerCase())
    {
          currentState="index";
    }else{
       if(inVal.text!=val.text)
    {
     Alert.show("验证码错误！","提示");
      
    }else{
        Alert.show("用户名和密码不匹配！","提示");
    }
    }
     }
    
   }

   protected function button2_clickHandler(event:MouseEvent):void
   {
    userName.text="";
    pasWord.text="";
    inVal.text="";
   }
   protected function valdetorNumber():String
   {
    var digtal1:Number;
    var digtal2:Number;
    var str1:Number;
    var str2:Number;
    var code:String;
    digtal1=Math.random()*10;
    digtal2=Math.random()*10;
    str1=Math.random()*26;
    str2=Math.random()*26;
    code=String.fromCharCode(65+str1)+String.fromCharCode(48+digtal1)
         +String.fromCharCode(65+str2)+String.fromCharCode(48+digtal2);
    
    return code;
   }
   

   protected function button3_clickHandler(event:MouseEvent):void
   {
    valdetorNumber();
    initApp();
   }

  ]]>
 
 
  
  
 

 
  
 
 
  
  
  
  
  
  
  
  
  
  
 
 

 最终效果：