flex登陆框实例

转载请保持文章完整性!
本文链接地址:http://www.joelove.cn/4lone/59.html
主页:joel's blog

本例子是实现了一个网页登录窗口的验证程序，具有验证码功能

 

写道

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()">
<mx:states>
<!--新建“index”State-->
<mx:State name="index">
<!--移除“登录框”-->
<mx:RemoveChild target="{panel1}"/>
<!--添加新的组件-->
<mx:AddChild position="lastChild">
<mx:Label x="231" y="174" text="欢迎来到主页" fontFamily="Georgia" fontSize="20" />
</mx:AddChild>
</mx:State>
</mx:states>
<mx:Script>
<![CDATA[
import mx.controls.Alert;
private function initApp():void
{
//显示校验码
lblCheckCode.text=GenerateCheckCode();
}
private function loginHandle():void
{
//空的情况
if(txtUsername.text==""||txtPassword.text=="")
{
Alert.show("请输入完整数据!");
}
else
{
//合法用户
if(txtUsername.text=="Administrator"&&txtPassword.text=="123456"&&txtCheckCode.text.toLocaleLowerCase()==lblCheckCode.text.toLowerCase())
{
currentState="index";
}
//登录失败
else
{
//校验码错误
if(txtCheckCode.text.toLowerCase()!=lblCheckCode.text.toLowerCase())
{
Alert.show("校验码错误!");
//重新生成校验码
lblCheckCode.text=GenerateCheckCode();
}
//用户名或密码错误
else
Alert.show("用户名或密码错误!");
}
}
}
private function resetHandle():void
{
txtUsername.text="";
txtPassword.text="";
txtCheckCode.text="";
}

//生成随机码
private function GenerateCheckCode():String
{
//初始化
var ran:Number;
var number:Number;
var code:String;
var checkCode:String ="";
//生成四位随机数
for(var i:int=0; i<4; i++)
{
//Math.random生成数为类似为0.1234
ran=Math.random();
number =Math.round(ran*10000);
//如果是2的倍数生成一个数字
if(number % 2 == 0)
//"0"的ASCII码是48
code = String.fromCharCode(48+(number % 10));
//生成一个字母
else
//"A"的ASCII码为65
code = String.fromCharCode(65+(number % 26)) ;
checkCode += code;
}
return checkCode;
}

]]>
</mx:Script>
<mx:Panel x="337.5" y="261" width="349" height="257" layout="absolute" title="用户登录" fontFamily="Georgia" fontSize="12" id="panel1">
<!-- "用户名"标签 -->
<mx:Label x="41.5" y="33" text="用户名"/>
<!-- "密码"标签 -->
<mx:Label x="42.5" y="81" text="密码"/>
<!-- "用户名"输入框 -->
<mx:TextInput x="94.5" y="33" id="txtUsername"/>
<!-- "密码"输入框 -->
<mx:TextInput x="95.5" y="81" id="txtPassword" displayAsPassword="true"/>
<!-- "登录"按钮 -->
<mx:Button x="82.5" y="159" label="登录" id="btnLogin" click="loginHandle()"/>
<!-- "重置"按钮 -->
<mx:Button x="181.5" y="159" label="重置" id="btnReset" click="resetHandle()"/>
<!-- "校验码"标签 -->
<mx:Label x="165.5" y="125" id="lblCheckCode" width="42.5" color="#377CD0"/>
<mx:LinkButton x="216" y="123" label="看不清楚?" id="linkbtnReGenerate" click="lblCheckCode.text=GenerateCheckCode();" fontFamily="Georgia" fontSize="11"/>
<mx:Label x="39.5" y="123" text="校验码"/>
<!-- "校验码"输入框 -->
<mx:TextInput x="96.5" y="121" id="txtCheckCode" width="61" maxChars="4"/>
</mx:Panel>

</mx:Application>