flex制作一个用户登录框（含验证码）

来源：互联网发布：mac samorost 1 2 编辑：程序博客网时间：2024/05/10 03:50

这里用到了不少知识点状态绑定生成验证码的算法下面这个小case~~和大家分享一下

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
             fontSize="12" horizontalAlign="center" creationComplete="init()">

<mx:Script>
  <![CDATA[
   import mx.controls.Alert;

   private function init():void{
    generate.text=generateCheckCode();
   }

   //login identifying
   private function loginHandler():void{
      if(user.text==""||pass.text==""){
      Alert.show("user or pass is empty","tips");
      }else{
      if(user.text=="shane"&&pass.text=="shane"
          &&identify.text.toLowerCase()==generate.text.toLowerCase()){

        Alert.show("login is OK","tips");
           currentState="hollow";

      }else{
        if(identify.text.toLowerCase()!=generate.text.toLowerCase()){
         Alert.show("indentifyCode is error","tips");
         generate.text=generateCheckCode();
        }else{
        Alert.show("user or pass error","tips");
        }
      }
      }
   }


   //clear
   private function clearHandler():void{
    user.text=pass.text="";
   }

   //generate identifying coder

   private function generateCheckCode():String{
    //init
    var num:Number;
    var code:String;
    var checkCode:String="";

    for(var i:int=0;i<5;i++){
     num=Math.round(Math.random()*100000);
     if(num%2==0){
      code=String.fromCharCode(48+(num%10));
     }else{
      code=String.fromCharCode(65+(num%26));
     }
     checkCode +=code;
    }
    return checkCode;
   }
  ]]>
</mx:Script>

<mx:Panel id="panel" x="143" y="115" width="350" height="229" layout="absolute" title="login">

  <mx:Button id="btnLogin" x="73" y="141" label="login" click="loginHandler()"/>
  <mx:Button id="btnClear" x="167" y="141" label="clear" click="clearHandler()"/>

  <mx:Label x="44" y="31" text="user"/>
  <mx:Label x="44" y="64" text="pass"/>

  <mx:TextInput id="user" x="81" y="31"/>
  <mx:TextInput id="pass" x="81" y="62" displayAsPassword="true"/>
  <mx:Text x="28" y="100" text="identify"/>
  <mx:TextInput x="81" y="98" width="50" id="identify"/>
  <mx:Label x="139" y="100" width="48" id="generate"/>
  <mx:Label x="195" y="100" text="看不清楚换个~~" click="generateCheckCode()"/>

</mx:Panel>

   <mx:states>
   <mx:State name="hollow">
     <mx:RemoveChild target="{panel}"/>
     <mx:AddChild position="lastChild">
      <mx:Label text="hollow marshane" x="0" y="200" fontSize="200" color="red"/>
     </mx:AddChild>
   </mx:State>
   </mx:states>

</mx:Application>