这个方法可以实现简易的验证码,但没有完善（区分大小写）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>验证码</title>
<style type="text/css">
#xinxi{
font-size: 16px;
color: red;
font-weight: bold;
background: palegreen;
border: none;
width: 100px;
letter-spacing: 10px;
height: 30px;
}
</style>
</head>
<body onload="cear()">
<input type="text" id="kuang"/>
<br />
<input type="button" id="xinxi" onclick="dianji()"/>
<br />
<input type="submit" value="提交" onclick="tijiao()"/>
</body>
<script type="text/javascript">
var code;
var yanzheng=document.getElementById('xinxi');
function cear(){
code="";
var codelength=4;
var codechars=new Array(
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'
)
for(var i=0;i<codelength;i++){
var charNum=Math.floor(Math.random()*55);
code+=codechars[charNum];
}
yanzheng.value=code;
}
function dianji(){
cear();
}
function tijiao(){
var kuang=document.getElementById('kuang');
if(kuang.value==""){
alert("空")
cear();
}else{
if(kuang.value==yanzheng.value){
alert('验证成功');
document.getElementById('kuang').value="";
}else{
alert('验证失败');
document.getElementById('kuang').value="";
cear();
}
}
}
</script>
</html>
网友评论