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

最新推荐文章于 2023-09-11 16:03:28 发布

marshane

最新推荐文章于 2023-09-11 16:03:28 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： flex function application login button user

本文链接：https://blog.youkuaiyun.com/marshane/article/details/2641278

这篇博客展示了如何利用Flex构建一个用户登录界面，并实现验证码功能。在创建的登录应用中，包含了输入验证、登录处理和验证码生成的详细步骤。用户输入用户名、密码和验证码，点击登录按钮后，系统会检查用户输入是否为空、验证码是否正确以及用户名和密码的匹配情况。如果所有条件都满足，用户将看到登录成功的提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里用到了不少知识点状态绑定生成验证码的算法下面这个小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>