带验证码的Flex登录窗口实例代码

如果您喜欢这些文章，欢迎点击此处订阅本Blog title="RSS 2.0" type="application/rss+xml" href="http://feed.feedsky.com/softwave" rel="alternate">

<script type="text/javascript"> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

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

1. <?xml version="1.0" encoding="utf-8"?>
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()">
3.     <mx:states>
4.         <!--新建“index”State-->
5.         <mx:State name="index">
6.             <!--移除“登录框”-->
7.             <mx:RemoveChild target="{panel1}"/>
8.             <!--添加新的组件-->
9.             <mx:AddChild position="lastChild">
10.                 <mx:Label x="231" y="174" text="欢迎来到主页" fontFamily="Georgia" fontSize="20" />
11.             </mx:AddChild>
12.         </mx:State>
13.     </mx:states>
14.     <mx:Script>
15.         <![CDATA[
16.             import mx.controls.Alert;
17.             private function initApp():void
18.             {
19.                 //显示校验码
20.                lblCheckCode.text=GenerateCheckCode(); 
21.             }
22.             private function loginHandle():void
23.             {
24.                 //空的情况
25.                 if(txtUsername.text==""||txtPassword.text=="")
26.                 {
27.                     Alert.show("请输入完整数据!");
28.                 }
29.                 else
30.                 {
31.                     //合法用户
32.                     if(txtUsername.text=="Administrator"&&txtPassword.text=="123456"&&txtCheckCode.text.toLocaleLowerCase()==lblCheckCode.text.toLowerCase())
33.                     {
34.                         currentState="index";
35.                     }
36.                     //登录失败
37.                     else  
38.                     {
39.                         //校验码错误
40.                         if(txtCheckCode.text.toLowerCase()!=lblCheckCode.text.toLowerCase()) 
41.                         {
42.                            Alert.show("校验码错误!");
43.                            //重新生成校验码
44.                            lblCheckCode.text=GenerateCheckCode(); 
45.                         }
46.                         //用户名或密码错误
47.                         else  
48.                           Alert.show("用户名或密码错误!");
49.                     }
50.                 }
51.             }
52.             private function resetHandle():void
53.             {
54.                 txtUsername.text="";
55.                 txtPassword.text="";
56.                 txtCheckCode.text="";
57.             }
58.  
59.             //生成随机码
60.             private function GenerateCheckCode():String
61.             {
62.                 //初始化
63.                 var ran:Number;
64.                 var number:Number;
65.                 var  code:String;
66.                 var checkCode:String ="";
67.                 //生成四位随机数
68.                 for(var i:int=0; i<4; i++)
69.                 {
70.                     //Math.random生成数为类似为0.1234
71.                     ran=Math.random();
72.                     number =Math.round(ran*10000); 
73.                     //如果是2的倍数生成一个数字
74.                     if(number % 2 == 0)
75.                       //"0"的ASCII码是48  
76.                       code = String.fromCharCode(48+(number % 10)); 
77.                     //生成一个字母
78.                     else  
79.                       //"A"的ASCII码为65
80.                       code = String.fromCharCode(65+(number % 26)) ;
81.                     checkCode += code;
82.                 }
83.                 return checkCode;
84.             }
85.  
86.         ]]>
87.     </mx:Script>
88.     <mx:Panel x="337.5" y="261" width="349" height="257" layout="absolute" title="用户登录" fontFamily="Georgia" fontSize="12" id="panel1">
89.         <!--  "用户名"标签  -->
90.         <mx:Label x="41.5" y="33" text="用户名"/> 
91.         <!--  "密码"标签  -->   
92.         <mx:Label x="42.5" y="81" text="密码"/> 
93.         <!--  "用户名"输入框  -->    
94.         <mx:TextInput x="94.5" y="33" id="txtUsername"/>  
95.         <!--  "密码"输入框  -->
96.         <mx:TextInput x="95.5" y="81" id="txtPassword" displayAsPassword="true"/>
97.         <!--  "登录"按钮  --> 
98.         <mx:Button x="82.5" y="159" label="登录" id="btnLogin" click="loginHandle()"/> 
99.         <!--  "重置"按钮  --> 
100.         <mx:Button x="181.5" y="159" label="重置" id="btnReset" click="resetHandle()"/> 
101.         <!--  "校验码"标签  --> 
102.         <mx:Label x="165.5" y="125" id="lblCheckCode" width="42.5" color="#377CD0"/>
103.         <mx:LinkButton x="216" y="123" label="看不清楚?" id="linkbtnReGenerate" click="lblCheckCode.text=GenerateCheckCode();" fontFamily="Georgia" fontSize="11"/>
104.         <mx:Label x="39.5" y="123" text="校验码"/>
105.         <!--  "校验码"输入框  --> 
106.         <mx:TextInput x="96.5" y="121" id="txtCheckCode" width="61" maxChars="4"/>
107.     </mx:Panel>
108. </mx:Application>

转自： http://www.joelove.cn/

<script type="text/javascript"> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

<script type="text/javascript"> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

<script type="text/javascript" src="http://www.google.com/reader/ui/publisher.js"></script> <script type="text/javascript" src="http://www.google.com/reader/public/javascript/user/00697638153916680411/state/com.google/broadcast?n=5&callback=GRC_p%28%7Bc%3A%22green%22%2Ct%3A%22%5Cu8FD9%5Cu4E9B%5Cu6587%5Cu7AE0%5Cu4E5F%5Cu503C%5Cu5F97%5Cu4E00%5Cu770B%22%2Cs%3A%22false%22%7D%29%3Bnew%20GRC"></script>