<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div>
<input type="text" id="input" />
<input type="button" id="checkCode" class="code" onclick="createCode()" />
<a href="#" onclick="createCode()">看不清楚</a><br>
<input type="button" value="驗(yàn)證" onclick="validate()" />
</div>
</body>
<script type="text/javascript">
var code; //在全局定義驗(yàn)證碼
//產(chǎn)生驗(yàn)證碼
window.onload = function() {
createCode();
}
function createCode() {
code = "";
var codeLength = 4; //驗(yàn)證碼的長(zhǎng)度
var checkCode = document.getElementById("checkCode");
var random = 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'); //隨機(jī)數(shù)
for(var i = 0; i < codeLength; i++) { //循環(huán)操作
var charIndex = Math.floor(Math.random() * 36); //取得隨機(jī)數(shù)的索引
code += random[charIndex]; //根據(jù)索引取得隨機(jī)數(shù)加到code上
}
checkCode.value = code; //把code值賦給驗(yàn)證碼
}
//校驗(yàn)驗(yàn)證碼
function validate() {
var inputCode = document.getElementById("input").value.toUpperCase(); //取得輸入的驗(yàn)證碼并轉(zhuǎn)化為大寫
if(inputCode.length <= 0) { //若輸入的驗(yàn)證碼長(zhǎng)度為0
alert("請(qǐng)輸入驗(yàn)證碼！"); //則彈出請(qǐng)輸入驗(yàn)證碼
} else if(inputCode != code) { //若輸入的驗(yàn)證碼與產(chǎn)生的驗(yàn)證碼不一致時(shí)
alert("驗(yàn)證碼輸入錯(cuò)誤！"); //則彈出驗(yàn)證碼輸入錯(cuò)誤
createCode(); //刷新驗(yàn)證碼
} else { //輸入正確時(shí)
alert("校正成功"); //彈出成功
}
}
</script>
</html>
