js生成六位驗證碼!

Html:
<form id="form1" runat="server" οnsubmit="validateCode()">
    <div>
        <table border="0" cellspacing="5" cellpadding="5" >
            <tr>
                <td>驗證碼:</td><td><input  style="float:left;" type="text"   id="inputCode" /></td><td>請輸入驗證碼</td>
            </tr>
            <tr><td></td><td><input id="Button1"  οnclick="validateCode();" type="button" value="確定" /></td><td></td>
            </tr>
            <tr>
                <td></td><td> <div class="code" id="checkCode" οnclick="createCode()" ></div></td>
                <td><a  href="#" οnclick="createCode()">換一張</a></td>
            </tr>
        </table>
    </div>
</form>



Css:
<style>
    .code
    {
        background-color: #1cbb9b;
        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;
        width: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>



Javascript:
<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() * 61);
            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>




發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章