JavaScript實(shí)現(xiàn)隨機(jī)生成驗(yàn)證碼及校驗(yàn)
更新時(shí)間：2021年06月16日 11:46:15 作者：江南時(shí)雨
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)隨機(jī)生成驗(yàn)證碼及校驗(yàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)隨機(jī)生成驗(yàn)證碼及校驗(yàn)的具體代碼，供大家參考，具體內(nèi)容如下
輸入驗(yàn)證碼（區(qū)分大小寫）點(diǎn)擊確認(rèn)，進(jìn)行校驗(yàn)。出錯(cuò)就彈框提示
點(diǎn)擊 看不清 重新隨機(jī)生成驗(yàn)證碼
當(dāng)驗(yàn)證碼輸入錯(cuò)誤時(shí)進(jìn)行提示
<body>
<div class="v_code">
<div class="code_show">
<span class="code" id="checkCode"></span>
<a href="#" id="linkbt">看不清，換一張</a>
</div>
<div class="input_code">
<label for="inputCode">驗(yàn)證碼：</label>
<input type="text" id="inputCode">
<span id="text_show"></span>
</div>
<input type="button" id="Button1" value="確認(rèn)">
</div>
<script>
// 1.生成驗(yàn)證碼
// 6位數(shù) 0-9 a-f 隨機(jī)生成6位 內(nèi)容必須是0-9 a-f 字符串
// 數(shù)組 下標(biāo) 0、1、2…… 從數(shù)組當(dāng)中 隨機(jī)下標(biāo) 0-15位
// 2.進(jìn)行驗(yàn)證 點(diǎn)擊確認(rèn)時(shí)，進(jìn)行對比
window.onload = function() {
const randomWord = () => {
let code = '';
for (var i = 0; i < 6; i++) {
var type = getRandom(1,3);
switch(type) {
case 1:
code += String.fromCharCode(getRandom(48,57)) // 數(shù)字
break;
case 2:
code += String.fromCharCode(getRandom(65,90)); //大寫字母
break;
case 3:
code += String.fromCharCode(getRandom(97,122)); //小寫字母
break;
}
}
return code;
}
function getRandom (min, max) {
return Math.round(Math.random()*(max-min)+min)
}
// 調(diào)用取數(shù)函數(shù)
const rand = randomWord();
//console.log(rand);
var checkCode = document.getElementById('checkCode');
checkCode.innerText = rand;
// 點(diǎn)擊切換隨機(jī)數(shù)
var linkbt = document.getElementById('linkbt');
linkbt.addEventListener('click', function() {
checkCode.innerText = randomWord();
})
// 提交進(jìn)行對比
document.getElementById('Button1').onclick = function() {
var inputCode = document.querySelector('#inputCode');
if (inputCode.value != checkCode.innerText) {
alert('您輸入的驗(yàn)證碼不正確');
inputCode.value = '';
return false;
} else {
alert('輸入正確');
}
}
}
</script>
</body>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
下面的代碼是從實(shí)際項(xiàng)目中AJAX的回調(diào)部分 copy 出來的，使用了JS的遞歸，文本格式為JSON2010-05-05
通過函數(shù)對象的性質(zhì)，可以很方便的將一個(gè)函數(shù)賦值給一個(gè)變量或者將函數(shù)作為參數(shù)傳遞，下面為大家介紹下函數(shù)的使用語法
2013-12-12 
arguments對象驗(yàn)證函數(shù)的參數(shù)是否合法
Javascript函數(shù)中的參數(shù)對象arguments是個(gè)對象，而不是數(shù)組。但它可以類似數(shù)組那樣通過數(shù)字下表訪問其中的元素，而且它也有l(wèi)ength屬性標(biāo)識(shí)它的元素的個(gè)數(shù)。
2015-06-06 
Apply an AutoFormat to an Excel Spreadsheet
Apply an AutoFormat to an Excel Spreadsheet...
2007-06-06 
js函數(shù)定時(shí)器實(shí)現(xiàn)定時(shí)讀取系統(tǒng)實(shí)時(shí)連接數(shù)
這篇文章主要介紹了使用js函數(shù)定時(shí)器實(shí)現(xiàn)定時(shí)讀取系統(tǒng)實(shí)時(shí)連接數(shù),需要的朋友可以參考下
2014-04-04 
使用Nginx部署前端項(xiàng)目的詳細(xì)步驟記錄
在實(shí)際開發(fā)中我們通常會(huì)使用Nginx來部署前端靜態(tài)頁面,以提供快速訪問速度和良好的用戶體驗(yàn),這篇文章主要給大家介紹了關(guān)于使用Nginx部署前端項(xiàng)目的詳細(xì)步驟,需要的朋友可以參考下
2024-08-08 
JavaScript中事件流冒泡的原理與實(shí)現(xiàn)
在JavaScript中,事件流冒泡是一種非常重要的概念,它是指事件從最內(nèi)層的元素開始,逐級向外傳播到最外層元素的過程,下面我們就來了解下JavaScript中事件流冒泡的原理與實(shí)現(xiàn)吧
2023-11-11 
這篇文章主要為大家詳細(xì)的介紹了Bootstrap中Carousel的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-06-06 
掌握J(rèn)avaScript中的DOM操作可通過id、class、標(biāo)簽名及CSS選擇器進(jìn)行元素選擇和內(nèi)容修改,Timer定時(shí)器功能包括設(shè)置延時(shí)和間隔執(zhí)行,詳細(xì)介紹了事件處理器和事件監(jiān)聽函數(shù)的使用,以及避免事件覆蓋的建議
2024-10-10