flex写的验证码

//======================单独写一个as类获取验证码=============

package file
{
 public class FlexCode
 {
  public function FlexCode()
  {
  }
  /**
   * 根据给定的位数获得验证码
   * @param count 验证码数量
   * @return 验证码字符串
   */
  public static function getCode(count:int):String
  {
   var code:String="";
   var num:Number=0;
   for(var i:int=0;i<count;i++)
   {
    num=Math.floor(Math.random()*10000);
    if(num%2==0)
    {
     //数字从48开始(48的keycode是0)
     code=code+String.fromCharCode(48+(num%10));
    }
    else
    { //65大写字母,96小写字母
     code=code+String.fromCharCode(65+(num%26));
    }
   }
   trace("生成-->"+code);
   return code;
  }
 }
}

 

//===============mxml=================

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="939"  layout="absolute" height="517">

 <mx:Style>
   .linkbutton{text-decoration:underline; font-style:italic;}
  </mx:Style>
  <mx:Script>
   <![CDATA[
    import file.FlexCode;
    //在label上显示验证码
    var code:String="";
    public function initCode():void{
     code=FlexCode.getCode(4);
     this.lblcode.text=code;

    //给label画背景色
     lblcode.graphics.beginFill(0xff0000);
     lblcode.graphics.drawRect(0,0,lblcode.width,lblcode.height);
     lblcode.graphics.endFill();
    }
    //看不清事件,重新获得验证码
    private function refech():void{
     this.initCode();
    }
    //验证用户输入是否是相同
    private function validate():void{
     if(txtCode.text.toUpperCase()==code){
      Alert.show("验证通过!");
     }else{
      Alert.show("验证失败");
     }
    }
   ]]>
  </mx:Script>
  <mx:Label x="227" y="440" text="Label" width="77" fontSize="18" id="lblcode" fontStyle="italic"/>
  <mx:LinkButton x="312" y="438" label="看不清楚?" color="#031AF8" fontSize="18" styleName="linkbutton" creationComplete="initCode()" click="refech()"/>
  <mx:TextInput x="46" y="446" id="txtCode"/>
  <mx:Button x="60" y="485" label="Validate" width="102" click="validate()"/>
</mx:Application>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个简单的React验证码组件: ``` import React, { useState } from 'react'; import './验证码.css'; const 验证码 = () => { const [code, setCode] = useState(''); const [generatedCode, setGeneratedCode] = useState(''); const generateCode = () => { const code = Math.floor(Math.random() * (999999 - 100000 + 1)) + 100000; setGeneratedCode(code.toString()); }; const handleSubmit = e => { e.preventDefault(); if (code === generatedCode) { alert('验证成功'); } else { alert('验证失败,请重新输入'); generateCode(); setCode(''); } }; return ( <div className="验证码"> <div className="code">{generatedCode}</div> <button className="generate" onClick={generateCode}> 生成验证码 </button> <form onSubmit={handleSubmit}> <input type="text" value={code} onChange={e => setCode(e.target.value)} placeholder="请输入验证码" required /> <button className="submit" type="submit"> 提交 </button> </form> </div> ); }; export default 验证码; ``` 相关CSS: ``` .验证码 { display: flex; flex-direction: column; align-items: center; font-size: 1.2rem; margin-top: 20px; } .code { font-weight: bold; margin-bottom: 10px; } .generate { background-color: #007bff; border: none; color: white; padding: 10px 20px; margin-bottom: 10px; cursor: pointer; } input[type='text'] { padding: 10px; margin-right: 10px; font-size: 1.2rem; border: none; border-bottom: 1px solid black; } .submit { background-color: #007bff; border: none; color: white; padding: 10px 20px; cursor: pointer; margin-top: 10px; } ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值