实现思路

产生4位随机的组合验证码

1. 定义一个数码数组arr，用于盛放'a-z', 'A-Z', '0-9'，这个数组长度为62;
2. 先定义一个空数组result，用于盛放产生的4位随机码；
3. 实现一个循环次数是4的循环，在该循环中随机产生一个[0,62]的数字，用于获取1中数码数组arr的元素，然后将得到的随机数码放到2中定义的数组中，知道循环结束；
4. 循环结束后，调用数组的join方法，将result数组中的元素进行拼接，得到最终的随机验证码；

代码

HTML

<div class="container">
        <form action="">
            <div class="form-group">
                <label for="codes" class="validate-txt">请输入验证码：</label>
                <input type="text" id="codes" class="validate-code">
                <span class="code" id="randomCode"></span>
                <span class="refresh" id="refresh"><img src="../img/refresh.png" alt="图片加载失败..."></span>
                <br>
                <span class="wrong-info" id="errorInfo"></span>
                <br>
                <span class="btn" id="confirm">确定</span>
            </div>

        </form>
    </div>

CSS

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: "Microsoft YaHei";
}

.container {
    width: 100%;
    height: 100%;
    padding: 15px;
}

.form-group {
    width: 100%;
    height: 30px;
    line-height: 30px;
}

.validate-txt {
    width: 20%;
    height: 30px;
    line-height: 30px;
    color: #333;
    font-size: 14px;
}

.validate-code {
    height: 30px;
    line-height: 30px;
    outline: none;
    border: none;
    box-shadow: 0 0 2px #847b7b;
    border-radius: 5px;
    padding: 0;
    text-indent: 0.2em;
}

.validate-code:focus {
    box-shadow: 0 0 2px#00a0e6;
}

.code {
    display: inline-block;
    vertical-align: middle;
    width: 65px;
    height: 30px;
    line-height: 30px;
    letter-spacing: 4px;
    text-align: center;
    background: #4f61407d;
}

.refresh {
    display: inline-block;
    height: 30px;
    line-height: 30px;
    vertical-align: middle;
    cursor: pointer;
}

.wrong-info {
    display: none;
    color: #f00;
    font-size: 12px;
}

.btn {
    padding: 5px 8px;
    background: #00a0e6;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    border-radius: 5px;
    cursor: pointer;
}

JS

window.onload = function() {
    var validateCode = getId("codes");
    var randomCode = getId("randomCode");
    var refresh = getId("refresh");
    var errorInfo = getId("errorInfo");
    var confirm = getId("confirm");
    randomCode.innerHTML = generateRandomCode();
    // 点击refresh按钮,重置验证码
    refresh.onclick = function() {
        randomCode.innerHTML = generateRandomCode();
    };
    // 进行验证
    confirm.onclick = function() {
        var val = validateCode.value;
        errorInfo.style.display = 'block';
        if (val) {
            if (val !== randomCode.innerHTML) {
                errorInfo.innerHTML = '验证码有误，请重新输入！';
                randomCode.innerHTML = generateRandomCode();
            } else {
                errorInfo.style.display = "none";
                setTimeout(function() {
                    alert("验证成功");
                }, 80);

            }
        } else {

            errorInfo.innerHTML = '请输入验证码！';
            randomCode.innerHTML = generateRandomCode();
        }
    };
};
/**
 * 根据元素获取id
 * @param {String} id 需要获取的元素的id
 */
function getId(id) {
    return document.getElementById(id);
}

function generateRandomCode() {
// 用于盛放随机数码的空数组
    var result = [];
// 长度为62的数码数组
    var arr = ["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", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
    for (var i = 0; i < 4; i++) {
        // 用于随机获取arr中的元素，产生[0,62]之间的随机整数
        var num = Math.floor(Math.random() * 62);
        result.push(arr[num]);
    }
    return result.join('')
}

结果

结果.png