JS 實現(xiàn)隨機驗證碼功能
更新時間：2017年02月15日 15:55:31 作者：Mr丶miao
驗證碼驗證是網(wǎng)頁常出現(xiàn)的一個驗證點，所謂驗證碼類型有很多，下面代碼只是實現(xiàn)一個簡單的驗證功能，需要的朋友參考下
1、驗證碼 驗證是網(wǎng)頁常出現(xiàn)的一個驗證點，所謂驗證碼類型有很多，下面代碼只是實現(xiàn)一個簡單的驗證功能。
<div> <input type = "text" id = "input" value="" /> <input type = "button" id="code" onclick="createCode()"/> <input type = "button" value = "驗證" onclick = "validate()"/> </div>
2、隨便加點樣式
#code{
font-family:Arial;
font-style:italic;
font-weight:bold;
border:0;
letter-spacing:2px;
color:blue;
}
3.JS部分，里面我已經(jīng)加了詳細的備注
//設置一個全局的變量，便于保存驗證碼
var code;
function createCode(){
//首先默認code為空字符串
code = '';
//設置長度，這里看需求，我這里設置了4
var codeLength = 4;
var codeV = 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');
//循環(huán)codeLength 我設置的4就是循環(huán)4次
for(var i = 0; i < codeLength; i++){
//設置隨機數(shù)范圍,這設置為0 ~ 36
var index = Math.floor(Math.random()*36);
//字符串拼接 將每次隨機的字符 進行拼接
code += random[index];
}
//將拼接好的字符串賦值給展示的Value
codeV.value = code;
}
//下面就是判斷是否== 的代碼，無需解釋
function validate(){
var oValue = document.getElementById('input').value.toUpperCase();
if(oValue ==0){
alert('請輸入驗證碼');
}else if(oValue != code){
alert('驗證碼不正確，請重新輸入');
oValue = ' ';
createCode();
}else{
window.open('http://www.baidu.com','_self');
}
}
//設置此處的原因是每次進入界面展示一個隨機的驗證碼，不設置則為空
window.onload = function (){
createCode();
}
js驗證碼專題參考：http://www.fzitv.net/Special/922.htm
以上所述是小編給大家介紹的JS 實現(xiàn)隨機驗證碼功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
微信小程序?qū)崿F(xiàn)長按 識別圖片二維碼(兩種方案)
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)長按 識別圖片二維碼(兩種方案),第一種方案只需要在image里面加一個屬性就可以了,本文結(jié)合實例代碼介紹的非常詳細,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了ES6生成器用法,結(jié)合實例形式分析了ECMAScript6中生成器的概念、語法、使用方法與相關注意事項,需要的朋友可以參考下2017-04-04
在Web開發(fā)領域,響應式設計已經(jīng)成為一個不可或缺的趨勢,PostCSS插件——postcss-pxtorem的出現(xiàn)為我們提供了一種更加智能和高效的解決方案,本文將深入探討postcss-pxtorem的使用,包括其背后的原理、配置選項、實際應用中的注意事項等方面,需要的朋友可以參考下2023-12-12
五段實用的js高級技巧，一些不錯的小技巧，學習js的朋友可以看看。2011-12-12
這篇文章主要為大家詳細介紹了微信小程序App生命周期的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-01-01
這篇文章主要為大家詳細介紹了JavaScript設計模式之代理模式，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要介紹了微信小程序渲染性能調(diào)優(yōu)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-07-07
在JavaScript中雖沒有類似的方法，但我們可以利用字符串的replace方法自定義字符串的格式化方法。下面通過本文給大家分享使用JS在HTML中自定義字符串格式化的方法，需要的的朋友參考下吧2017-07-07
這篇文章主要給大家介紹了關于前端圖片壓縮常見的一些解決辦法,圖片上傳是前端中常見的的業(yè)務場景,無論是前臺還是后臺,適當?shù)膶D片進行壓縮處理,可以顯著的提升用戶體驗,需要的朋友可以參考下2023-11-11
前端水印就是在網(wǎng)頁或應用程序的前端界面上添加的一種標記,通常是文本、圖標或圖案等形式,下面小編就來和大家介紹四個常用的方法吧2025-03-03