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

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

 

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

     布局代码如下：

 

 <s:Panel x="126" y="98" width="250" height="200" id="login" title="用户登录" includeIn="login">
  <s:Label x="26" y="21" text="用户名："/>
  <s:Label x="26" y="51" text="密    码："/>
  <s:TextInput id="userName" x="82" y="19"/>
  <s:TextInput id="pasWord" x="82" y="46"/>
  <s:Button x="26" y="104" label="提交"/>
  <s:Button x="140" y="104" label="重设" />
  <s:Label x="26" y="79" text="验证码："/>
  <s:TextInput x="82" y="73" width="52" id="inVal"/>
  <s:Label x="140" y="80" id="val" color="red"/>
  <s:Button x="178" y="73" label="换" width="32"/>
 </s:Panel>

 

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()函数：

 <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
 xmlns:s="library://ns.adobe.com/flex/spark"
 xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
 creationComplete="initApp()">
 

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

<s:Button x="26" y="104" label="提交" click="button1_clickHandler(event)"/>

 

 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脚本：

 

 <s:Button x="140" y="104" label="重设" click="button2_clickHandler(event)"/>

 

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

 

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

 <s:Button x="178" y="73" label="换" width="32" click="button3_clickHandler(event)"/>

 

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

 

 所有代码如下：

 

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
 xmlns:s="library://ns.adobe.com/flex/spark"
 xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
 creationComplete="initApp()">

 <fx:Script>
  <![CDATA[
   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();
   }

  ]]>
 </fx:Script>
 <s:states>
  <s:State name="login"/>
  <s:State name="index"/>
 </s:states>

 <fx:Declarations>
  <!-- Place non-visual elements (e.g., services, value objects) here -->
 </fx:Declarations>
 <s:Panel x="126" y="98" width="250" height="200" id="login" title="用户登录" includeIn="login">
  <s:Label x="26" y="21" text="用户名："/>
  <s:Label x="26" y="51" text="密    码："/>
  <s:TextInput id="userName" x="82" y="19"/>
  <s:TextInput id="pasWord" x="82" y="46"/>
  <s:Button x="26" y="104" label="提交" click="button1_clickHandler(event)"/>
  <s:Button x="140" y="104" label="重设" click="button2_clickHandler(event)"/>
  <s:Label x="26" y="79" text="验证码："/>
  <s:TextInput x="82" y="73" width="52" id="inVal"/>
  <s:Label x="140" y="80" id="val" color="red"/>
  <s:Button x="178" y="73" label="换" width="32" click="button3_clickHandler(event)"/>
 </s:Panel>
 <s:Label includeIn="index" x="270" y="203" text="欢迎来到主页" fontSize="22"/>
</s:Application>

 最终效果：