<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>JS实现生成随机验证码并验证功能</title>
<style>
*{ margin: 0; padding: 0; }
.wrap{
500px;
margin: 20px auto;
}
#text{
height: 30px;
box-sizing: border-box;
vertical-align: middle;
text-indent: 1em;
}
#code{
display: inline-block;
80px; height: 30px;
background: #aaa;
text-align: center;
line-height: 30px;
color: #fff;
text-decoration: none;
letter-spacing: 7px;
padding-left: 7px;
vertical-align: middle;
font-weight: bold;
}
#btn{
60px; height: 30px;
outline: 0;
border: #153021;
background: #499990;
color: #fff;
border-radius: 5px;
}
</style>
</head>
<body onload= "createCode()">
<div class="wrap">
<input type="text" id="text" placeholder = "请输入验证码">
<a href="javascript:" id="code" onclick="createCode( this )"></a>
<input type="button" id="btn" value="验证" onclick="validate()">
</div>
<script>
//功能实现 ：自动生成验证码，点击验证按钮的时候匹配字符串成功则跳转到百度失败input输入框为空，继续随机生成；
var input = document.getElementById("text");
var btn = document.getElementById('btn');
var codes = document.getElementById('code');
var inputext="";
var code = "";
//创建验证码
function createCode() {
code = "";
//设置验证码的个数为4个
var codeLength = 4;
//设置验证码中科选取的数值
var random = [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'];
//random一共36个字符
for( var i =0 ; i<codeLength ; i++) //在random中随机去4个值出来
{
//使用random() 方法可返回介于 0 ~ 1 之间的一个随机数。round() 方法可把一个数字舍入为最接近的整数。
var j =Math.round(Math.random()*36) //随机生成下标
code+=random[j];
}
//把code随机生成的验证码放入超链接当中;
codes.innerHTML = code;
}
//获取输入框内的值
input.onchange = function (ev) {
inputext = input.value.trim().toUpperCase();
//console.log(inputext);
}
//结果校验 判断输入的字符和随机生成的验证码
function validate() {
//获取输入的内容，如果输入为空，弹出警告
if(inputext)
{
//检查是否相等
if(inputext == code)
{
window.open('http://www.baidu.com','_self');
}
else {
//清空输入框
input.innerHTML = "";
alert("验证码不正确，请重新输入");
//验证码在随机生成
createCode();
}
}
else{
alert("请输入验证码");
}
}
</script>
</body>
</html>