zoukankan      html  css  js  c++  java
  • 用javascript实现的验证码

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
            <meta charset="GBK">
            <meta name="Generator" content="EditPlus">
            <meta name="Author" content="">
            <meta name="Keywords" content="">
            <meta name="Description" content="">
        <title></title>
        <style type="text/css">
        .code
        {
                background:url(code_bg.jpg);
                font-family:Arial;
                font-style:italic;
                 color:blue;
                 font-size:30px;
                 border:0;
                 padding:2px 3px;
                 letter-spacing:3px;
                 font-weight:bolder;             
                 float:left;            
                 cursor:pointer;
                 150px;
                 height:60px;
                 line-height:60px;
                 text-align:center;
                 vertical-align:middle;

        }
        a
        {
            text-decoration:none;
            font-size:12px;
            color:#288bc4;
            }
        a:hover
        {
           text-decoration:underline;
            }
        </style>
        <script language="javascript" type="text/javascript">

            var code;
            function createCode() {
                code = "";
                var codeLength = 6; //验证码的长度
                var checkCode = document.getElementById("checkCode");
                var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
                'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z',
                'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); //所有候选组成验证码的字符,当然也可以用中文的
                for (var i = 0; i < codeLength; i++)
                {
                    var charNum = Math.floor(Math.random() * 52);
                    code += codeChars[charNum];
                }
                if (checkCode)
                {
                    checkCode.className = "code";
                    checkCode.innerHTML = code;
                }
            }
            function validateCode()
            {
                var inputCode = document.getElementById("inputCode").value;
                if (inputCode.length <= 0)
                {
                    alert("请输入验证码!");
                }
                else if (inputCode.toUpperCase() != code.toUpperCase())
                {
                    alert("验证码输入有误!");
                    createCode();
                }
                else
                {
                    alert("验证码正确!");
                }        
            }    
         </script>

    </head>
    <body onload="createCode()">
        <form id="form1" runat="server" onsubmit="validateCode()">
        <div>
        <table border="0" cellspacing="5" cellpadding="5" >
            <tr>
                <td></td><td> <div class="code" id="checkCode" onclick="createCode()" ></div></td>
                <td><a  href="#" onclick="createCode()">看不清换一张</a></td>
            </tr>
            <tr>
                <td>验证码:</td>
                <td><input  style="float:left;" type="text"   id="inputCode" /></td><td>请输入验证码</td>
            </tr>
            <tr><td></td><td><input id="Button1"  onclick="validateCode();" type="button" value="确定" /></td><td></td>
            </tr>
        </table>
        </div>
        </form>
    </body>
    </html>

  • 相关阅读:
    tabhost中setup()和setup(LocalActivityManager activityGroup)
    android自定义TabWidget
    Android使用Fragment来实现TabHost的功能(解决切换Fragment状态不保存)以及各个Fragment之间的通信
    底部菜单栏(三)Fragment+FragmentTabHost实现仿新浪微博底部菜单栏
    TabHost 两种使用方法 直接让一个Activity 继承TabActivity 和 利用findViwById()方法取得TagHost组件
    android的消息处理机制(图+源码分析)——Looper,Handler,Message
    Java高级--Java线程运行栈信息的获取 getStackTrace()
    Java中的守护线程 & 非守护线程(简介)
    Fragment之间的通信
    CString——Left、Right、Find、ReverseFind
  • 原文地址:https://www.cnblogs.com/songjinduo/p/4642052.html
Copyright © 2011-2022 走看看