点击按钮获取验证码,文本框失去焦点判断验证码是否输入正确。
html:
<input type="text" name="" id="text" />
<div id="VerCode"></div>
<button type="button" id="ver">获取验证码</button>
css:
#text {
width: 200px;
height: 25px;
float: left;
}
#VerCode {
width: 100px;
height: 25px;
background-color: #10C593;
float: left;
}
js:
var txt = document.getElementById("text");
var VerCode = document.getElementById("VerCode");
var ver = document.getElementById("ver");
ver.onclick = function() {
// 获取字母,数字
var xA = String.fromCharCode(parseInt(Math.random() * (90 - 65 + 1) + 65));
var xa = String.fromCharCode(parseInt(Math.random() * (122 - 97 + 1) + 97));
var x = parseInt(Math.random() * 10);
// 把字母数字添加到数组中
var arr = [xA, xa, x, x];
//定义空数组,用来存放随机排序数据
var arr2 = [];
// VerCode.innerHTML=arr;
for (var i = 0; i < 4; i++) {
var n = parseInt(Math.random() * 4);
arr2[i] = arr[n];
}
var str = arr2.join("");
VerCode.innerHTML = str;
}
//文本框失去焦点事件
txt.onblur = function() {
//获取文本框内容
var txtStr = txt.value.toLowerCase();
// console.log(typeof txtVa);
//获取div内容
var verStr = VerCode.innerHTML.toLowerCase();
// console.log(verStr);
//验证判断
if (txtStr == verStr) {
VerCode.innerHTML = "验证成功";
} else {
VerCode.innerHTML = "验证失败";
}
}