<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>验证码</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<style type="text/css">
.yzm {
font-family: "微软雅黑";
font-size: 14px;
color: #000;
}
#input-box {
width: 80px;
height: 16px;
line-height: 16px;
}
#cheCode {
width: 100px;
border: none;
color: blue;
font-size:16px;
text-align: center;
letter-spacing: 4px;
margin-left: 5px;
cursor: pointer;
}
.change {
text-decoration:none;
}
</style>
<script>
var str = "";
function creatStr(){
var newArray = [];
str = "";
var cheCode = document.getElementById("cheCode");
cheCode.value = "";
for(var i=0;i<=9;i++){
newArray.push(i);
}
for(var i=0;i<26;i++){
newArray.push(String.fromCharCode(65+i));
}
for(var i=0;i<26;i++){
newArray.push(String.fromCharCode(97+i));
}
for(var i=0;i<6;i++){
var rand = Math.floor(Math.random() * 62);
str +=newArray[rand];
}
cheCode.value = str;
}
function sure() {
var inputCode = document.getElementById("input-box").value;
if(inputCode.length <=0) {
alert("请输入验证码");
return false;
} else if(inputCode != str&&inputCode.toUpperCase() != str.toUpperCase()) {
alert("验证码不正确,请重新输入");
creatStr();
return false;
} else{
alert("验证码输入正确");
return true;
}
}
</script>
</head>
<body οnlοad="creatStr()">
<div class="yzm">
<form action="" method="post">
<span>验证码:</span>
<input type="text" maxlength="6" id="input-box">
<input type="text" id="cheCode" οnclick="creatStr()" readonly>
<a href="" class="change" οnclick="creatStr()"><i>看不清楚,换一张</i></a>
<input type="button" οnclick="sure()" value="确定" />
</form>
</div>
</body>
</html>
验证码 小栗子
最新推荐文章于 2024-09-20 09:17:44 发布