JS验证码

66 阅读 0 评论 44 点赞

我是靠谱客的博主整齐早晨，最近开发中收集的这篇文章主要介绍JS验证码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

JS部分

var code ; //在全局定义验证码

    //产生验证码
    window.onload = function createCode(){
         code = "";
         var codeLength = 4;//验证码的长度
         var checkCode = document.getElementById("code");
         var random = 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');//随机数
         for(var i = 0; i < codeLength; i++) {//循环操作
            var index = Math.floor(Math.random()*36);//取得随机数的索引（0~35）
            code += random[index];//根据索引取得随机数加到code上
        }
        checkCode.value = code;//把code值赋给验证码
    }
    //校验验证码
    function validate(){
        var inputCode = document.getElementById("input").value.toUpperCase(); //取得输入的验证码并转化为大写
        if(inputCode.length <= 0) { //若输入的验证码长度为0
            alert("请输入验证码！"); //则弹出请输入验证码
        }
        else if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时
            alert("验证码输入错误！@_@"); //则弹出验证码输入错误
            createCode();//刷新验证码
            document.getElementById("input").value = "";//清空文本框
        }
        else { //输入正确时
            alert("^-^"); //弹出^-^
        }

}

HTML部分

    <html>
        <head>
            <title>验证码</title>
            <style type="text/css">
                #code
                {
                    font-family:Arial;
                    font-style:italic;
                    font-weight:bold;
                    border:0;
                    letter-spacing:2px;
                    color:blue;
                }
            </style>
            <script type = "text/javascript" src = "checkCode.js">
            </script>
        </head>
        <body>
            <div>
                <input type = "text" id = "input"/>
                <input type = "button" id="code" οnclick="createCode()"/>
                <input type = "button" value = "验证" onclick = "validate()"/>
            </div>
        </body>
    </html>