<!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 onload="creatStr()">
<div class="yzm">
<form action="" method="post">
<span>驗證碼：</span>
<input type="text" maxlength="6" id="input-box">
<input type="text" id="cheCode" onclick="creatStr()" readonly>
<a href="" class="change" onclick="creatStr()"><i>看不清楚，換一張</i></a>
<input type="button" onclick="sure()" value="確定" />
</form>
</div>
</body>
</html>驗證碼 小栗子
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章