JavaScript生成驗證碼并實現(xiàn)驗證功能
更新時間：2016年09月24日 14:43:58 作者：秋葉為何落
這篇文章主要介紹了JavaScript生成驗證碼并實現(xiàn)驗證功能的相關(guān)資料,代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友可以參考下
廢話不多說了，直接給大家貼代碼了，具體代碼如下所示：
<html>
<head>
<title>驗證碼</title>
<style type="text/css">
#code
{
font-family:Arial;
font-style:italic;
font-weight:bold;
border:0;
letter-spacing:2px;
color:blue;
}
</style>
<script type = "text/javascript" src = "checkCode.js">
</script>
</head>
<body>
<div>
<input type = "text" id = "input"/>
<input type = "button" id="code" onclick="createCode()"/>
<input type = "button" value = "驗證" onclick = "validate()"/>
</div>
</body>
</html>
checkCode.js
var code ; //在全局定義驗證碼
//產(chǎn)生驗證碼
window.onload = 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("input").value.toUpperCase(); //取得輸入的驗證碼并轉(zhuǎn)化為大寫
if(inputCode.length <= 0) { //若輸入的驗證碼長度為0
alert("請輸入驗證碼！"); //則彈出請輸入驗證碼
}
else if(inputCode != code ) { //若輸入的驗證碼與產(chǎn)生的驗證碼不一致時
alert("驗證碼輸入錯誤！@_@"); //則彈出驗證碼輸入錯誤
createCode();//刷新驗證碼
document.getElementById("input").value = "";//清空文本框
}
else { //輸入正確時
alert("^-^"); //彈出^-^
}
}
以上所述是小編給大家介紹的JavaScript生成驗證碼并實現(xiàn)驗證功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了微信小程序按鈕巧妙用法,按鈕組件功能比?HTML?中的?button?按鈕豐富，通過?open-type?屬性可以調(diào)用微信提供的各種功能（客服、轉(zhuǎn)發(fā)、獲取用戶授權(quán)、獲取用戶信息等），需要的朋友可以參考下2022-12-12
這篇文章主要介紹了js 判斷當前時間是否處于某個一個時間段內(nèi),使用 jutils - JavaScript常用函數(shù)庫的 isDuringDate 函數(shù)來實現(xiàn)，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-09-09
JavaScript動態(tài)添加數(shù)據(jù)到表單并提交的幾種方式
這篇文章主要介紹了JavaScript動態(tài)添加數(shù)據(jù)到表單并提交,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值,需要的朋友可以參考下2019-06-06
echarts餅圖標簽formatter使用及餅圖自定義標簽
項目中有遇到需要使用餅圖展示每種狀態(tài)所占比例,去echarts官網(wǎng)學(xué)習了一番,下面這篇文章主要給大家介紹了關(guān)于echarts餅圖標簽formatter使用及餅圖自定義標簽的相關(guān)資料,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了Symbol是ES2015新增的一種值類型數(shù)據(jù)，表示一種絕不重復(fù)的值,需要的朋友可以參考下2016-12-12
這篇文章主要給大家介紹了關(guān)于javascript中如何判斷類型的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習或者使用javascript具有一定的參考學(xué)習價值，需要的朋友們下面來一起學(xué)習學(xué)習吧2019-05-05
本文主要介紹了JavaScript原生節(jié)點操作的相關(guān)知識。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要為大家詳細介紹了解決js圖片加載時出現(xiàn)404問題的方法，具有一定的參考價值，這方面有困惑的朋友可以參考一下2015-11-11
彈出層永遠居中的方法有很多，在本文為大家詳細介紹下使用js是如何輕松實現(xiàn)的，喜歡的朋友可以參考下2013-11-11
javascript將非數(shù)值轉(zhuǎn)換為數(shù)值
parseInt()不能轉(zhuǎn)換浮點型數(shù)值，我們用parseFloat()來解決。這篇文章主要介紹了javascript將非數(shù)值轉(zhuǎn)換為數(shù)值,需要的朋友可以參考下2018-09-09