溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“JS如何自動生成動態(tài)HTML驗證碼頁面”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“JS如何自動生成動態(tài)HTML驗證碼頁面”這篇文章吧。
示例代碼如下：
<!DOCTYPE html>
<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>
//產(chǎn)生驗證碼
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'); //隨機數(shù)
for(var i = 0; i < codeLength; i++) { //循環(huán)操作
var index = Math.floor(Math.random() * 36); //取得隨機數(shù)的索引（0~35）
code += random[index]; //根據(jù)索引取得隨機數(shù)加到code上
}
checkCode.value = code; //把code值賦給驗證碼
}
//校驗驗證碼
function validate() {
var inputCode = document.getElementById("ctl00_txtcode").value.toUpperCase(); //獲取輸入框內(nèi)驗證碼并轉(zhuǎn)化為大寫
if(inputCode.length <= 0) { //若輸入的驗證碼長度為0
alert("請輸入驗證碼！"); //則彈出請輸入驗證碼
}
else if(inputCode != code) { //若輸入的驗證碼與產(chǎn)生的驗證碼不一致時
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>以上是“JS如何自動生成動態(tài)HTML驗證碼頁面”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼