JavaScript实现随机验证码并验证

前言

在许多登录页面里，我们都可以看到验证码的身影，每次登录都需要重新输入验证码。这个功能非常重要，它可以有效防止这种问题对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试。

效果展示

HTML

创建一个div拿来展示随机生成的验证码，一个span可以重新随机生成新的验证码，一个文本框可以输入我们的验证码，还有一个提交按钮。

	<div id="banar"></div>
	<span id="chang">看不清换一张</span><br>
    验证码：<input type="text" id="txt"><br>
    <input type="submit" value="验证" id="sub">

加入一些简单的CSS样式

#banar{
    width: 90px;
    height: 40px;
    background-color: #999;
    font-weight: bold;
    font-size: 2em;
    text-align: center;
    line-height: 40px;
    font-family: "fantasy";
    color: burlywood;
    margin: 10px;
    display: inline-block;
}
#chang{
    font-size: 14px;
    color: darkgreen;
    cursor: pointer;/* 鼠标经过变成小手 */
}
#txt{
    width: 60px;
    height: 20px;
    outline: none;/* 鼠标聚焦文本框没有边框线*/
}

JavaScript

原理就是需要创建一个数组，里面存放着随机验证码中所有可能出现的字母或数字，使用random()随机生成四个0-61的数字作为数组的索引。在判断我们在文本框输入的字母或数字和随机生成的字母或数字是否相等。如果相等，验证成功；否则验证错误。

var banar = document.getElementById('banar');
var txt = document.getElementById('txt');
var sub = document.getElementById('sub');
var chang = document.getElementById('chang');
//创建一个数组，里面包含着随机验证码所能出现的全部字符
var allchar =[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"];
        
function randomChar(){
    var result = "";//创建空的字符串，方便等下接收值
    //循环找出4的字符
    for(var i = 0;i <4;i++){
        //随机生成一个0-61的数字
        var index = Math.floor(Math.random() * 62);
        //将随机生成的数字，作为数组的索引，然后赋给result
        //每次赋一个数组值，循环4次最后就是4个字符
        result += allchar[index];
    }
    //把随机生成的4个字符添加到ID为banar的div里面
    banar.innerHTML = result;
    //点击验证按钮，判断我们输入的值和随机生成的值是否一样？
    //一样就弹出验证成功，不一样就弹出验证错误。
    sub.onclick = function(){
        if(txt.value == result){
            alert("验证成功！！！");
        }else{
            alert("验证错误！！！");
            randomChar();//如果错误，执行randomChar方法，重新随机生成4个字符
            txt.value = "";//如果错误，我们输入的验证码等于空，方便我们再次输入
        }
    };
}
randomChar();
//点击"看不见换一张"时,执行randomChar方法，重新随机生成4个字符，我们输入的验证码等于空，方便我们再次输入
chang.onclick = function(){
    txt.value = "";
    randomChar();
}