验证码的生成及校验
内容:验证码的刷新,确认时的验证
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>验证码的生成及校验</title>
<style type="text/css">
div{
padding: 0px 0px;
margin: 0px auto;
}
a{
color: blue;
font-style:
}
input{
width: 80px;
padding: 5px;
border-radius:8px;
margin-top: 10px;
border: 1px solid black;
}
.done{
width: 200px;
margin: 0 auto;
}
.inone{
width: 40px;
background: burlywood;
border: 0px none;
margin: 5px 75px;
}
</style>
</head>
<body>
<div class="done">
<div class="dtwo">
<span id="showid"></span>
<a id="refres">看不清,换一张</a>
</div>
<div class="dthree">
<label for="inputCode">验证码:</label>
<input type="text" name="inputCode" id="inputCode" value="" />
<span id="text_show"></span>
</div>
<input type="button" class="inone" id="button" value="确定" />
</div>
<script type="text/javascript">
//1. 生成验证码
//2. 6位数验证码,随机生成6位,内容为数字+字母
// 数组中随机取数
window.onload = function(){
var res = getCode();
console.log(res);
function getCode(){
var arr = ['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','Q','W','E','R','T','Y','U','I','O','P','A','S',
'D','F','G','H','J','K','L','Z','X','C','V','B','N','M'];
var str = '';
for (var i=0;i<6;i++) {
var num = Math.round(Math.random()*(61-0)+0);
//console.log(num);
str +=arr[num];
}
return str;
}
document.getElementById('showid').innerHTML = res;
//点击事件
document.getElementById('refres').onclick = function(){
document.getElementById('showid').innerHTML = getCode();
}
}
//验证 对比
document.getElementById('button').onclick = function(){
var code = document.getElementById('showid').innerText;
var inpurCode = document.getElementById('inputCode').value;
if (code != inpurCode) {
alert("您输入的验证码不正确!!")
document.getElementById('inputCode').value=''
return false;
}
}
</script>
</body>
</html>
运行结果
码完睡觉!!!