JS自動生成動態HTML驗證碼頁面，輸入錯誤自動清空輸入框
阿新 • • 發佈：2019-01-17
<html>
<head>
<title>驗證碼</title>
<meta charset="utf-8" />
<style type="text/css">
#code {
font-family: Arial;
font-style: italic;
font-weight: bold;
border: 0;
letter-spacing: 2px;
color: blue;
}
</style>
<script>
//產生驗證碼
window.onload = function() {
createCode()
}
var code; //在全域性定義驗證碼
function createCode() {
code = "";
var codeLength = 4; //驗證碼的長度
var checkCode = document.getElementById("code");
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'); //隨機數
for(var i = 0; i < codeLength; i++) { //迴圈操作
var index = Math.floor(Math.random() * 36); //取得隨機數的索引（0~35）
code += random[index]; //根據索引取得隨機數加到code上
}
checkCode.value = code; //把code值賦給驗證碼
}
//校驗驗證碼
function validate() {
var inputCode = document.getElementById("ctl00_txtcode").value.toUpperCase(); //獲取輸入框內驗證碼並轉化為大寫
if(inputCode.length <= 0) { //若輸入的驗證碼長度為0
alert("請輸入驗證碼！"); //則彈出請輸入驗證碼
} else if(inputCode != code) { //若輸入的驗證碼與產生的驗證碼不一致時
alert("驗證碼輸入錯誤!"); //則彈出驗證碼輸入錯誤
createCode(); //重新整理驗證碼
document.getElementById("ctl00_txtcode").value = ""; //清空文字框
} else { //輸入正確時
alert("正在登陸"); //彈出
}
}
</script>
</head>
<body>
<div>
<!--
時間：2017-01-11
描述：輸入框ct100_textcode
-->
<input type="text" id="ctl00_txtcode" />
<!--
時間：2017-01-11
描述：把驗證碼定義為按鈕，點選重新整理
-->
<input type="button" id="code" onclick="createCode()" />
<!--
時間：2017-01-11
描述：驗證按鈕
-->
<input type="button" value="驗證" onclick="validate()" />
</div>
</body>
</html>
<head>
<title>驗證碼</title>
<meta charset="utf-8" />
<style type="text/css">
#code {
font-family: Arial;
font-style: italic;
font-weight: bold;
border: 0;
letter-spacing: 2px;
color: blue;
}
</style>
<script>
//產生驗證碼
window.onload = function() {
createCode()
}
var code; //在全域性定義驗證碼
function createCode() {
code = "";
var codeLength = 4; //驗證碼的長度
var checkCode = document.getElementById("code");
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'); //隨機數
for(var i = 0; i < codeLength; i++) { //迴圈操作
var index = Math.floor(Math.random() * 36); //取得隨機數的索引（0~35）
code += random[index]; //根據索引取得隨機數加到code上
}
checkCode.value = code; //把code值賦給驗證碼
}
//校驗驗證碼
function validate() {
var inputCode = document.getElementById("ctl00_txtcode").value.toUpperCase(); //獲取輸入框內驗證碼並轉化為大寫
if(inputCode.length <= 0) { //若輸入的驗證碼長度為0
alert("請輸入驗證碼！"); //則彈出請輸入驗證碼
} else if(inputCode != code) { //若輸入的驗證碼與產生的驗證碼不一致時
alert("驗證碼輸入錯誤!"); //則彈出驗證碼輸入錯誤
createCode(); //重新整理驗證碼
document.getElementById("ctl00_txtcode").value = ""; //清空文字框
} else { //輸入正確時
alert("正在登陸"); //彈出
}
}
</script>
</head>
<body>
<div>
<!--
時間：2017-01-11
描述：輸入框ct100_textcode
-->
<input type="text" id="ctl00_txtcode" />
<!--
時間：2017-01-11
描述：把驗證碼定義為按鈕，點選重新整理
-->
<input type="button" id="code" onclick="createCode()" />
<!--
時間：2017-01-11
描述：驗證按鈕
-->
<input type="button" value="驗證" onclick="validate()" />
</div>
</body>
</html>