【案例】简单的js验证码

最新推荐文章于 2022-02-21 20:34:55 发布

邹大叔

最新推荐文章于 2022-02-21 20:34:55 发布

阅读量382

点赞数

分类专栏： Javascript

Javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

这里写图片描述

【案例】简单的js验证码

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="js/code.js"></script>
    <style>
        .v_code{
            width: 600px;
            margin: 0 auto;
        }
        .v_code > input{
            width: 60px;
            height: 36px;
            margin-top: 10px;
        }
        .code_show{
            overflow: hidden;
        }
        .code_show span{
            display: block;
            float: left;
            margin-bottom: 10px;
        }
        .code_show a{
            display: block;
            float: left;
            margin-top: 10px;
            margin-left: 10px;
        }
        .code {
            font-style: italic;
            background-color: #f5f5f5;
            color: blue;
            font-size: 30px;
            letter-spacing: 3px;
            font-weight: bolder;
            float: left;
            cursor: pointer;
            padding: 0 5px;
            text-align: center;
        }
        #inputCode{
            width: 100px;
            height: 30px;
        }
        a {
            text-decoration: none;
            font-size: 12px;
            color: #288bc4;
            cursor: pointer;
        }
        a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body onload="createCode()">
    <div class="v_code">
        <div class="code_show">
            <span class="code" id="checkCode" onclick="createCode()"></span>
            <a onclick="createCode()">看不清换一张</a>
        </div>
        <div class="input_code">
            <label for="inputCode">验证码：</label>
            <input type="text" id="inputCode" onblur="validateCode();" />
            <span id="text_show"></span>
        </div>
        <input id="Button1" type="button" value="确定" />
    </div>
</body>
</html>

code.js代码如下：

window.onload=function(){
    checkCode();
}
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;
    var textShow = document.getElementById("text_show")
    if (inputCode.length <= 0) {
        textShow.innerHTML = "请输入验证码";
        textShow.style.color = "red";
    } else if (inputCode.toUpperCase() != code.toUpperCase()) {
        textShow.innerHTML = "您输入的验证码有误";
        textShow.style.color = "red";
        createCode();
    } else {
        textShow.innerHTML = "验证码正确";
        textShow.style.color = "green";
    }
}
function checkCode(){
    var btn = document.getElementById("Button1");
    btn.onclick=function(){
        validateCode();
    }
}