JavaScript登錄驗證碼的實現(xiàn)
更新時間：2016年10月27日 09:32:29 作者：非非是
驗證碼功能真的無處不在，為了提高網(wǎng)站的安全性，驗證碼功能是必要的環(huán)節(jié)，今天小編通過本文給大家分享js登錄驗證碼的實現(xiàn)，感興趣的朋友跟著小編一起學(xué)習(xí)吧
廢話不多說，實現(xiàn)js登錄驗證碼的功能需要下面兩步，具體實現(xiàn)過程如下所示：
1.js
var code="" ; //在全局 定義驗證碼
function createCode(){
code = "";
var codeLength = 6;//驗證碼的長度
var checkCode = document.getElementById("checkCode");
checkCode.value = "";
var selectChar = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','J','K','L','M','N','P','Q','R','S','T','U','V','W','X','Y','Z');
for(var i=0;i<codeLength;i++) {
var charIndex = Math.floor(Math.random()*32);
code +=selectChar[charIndex];
}
if(code.length != codeLength){
createCode();
}
document.getElementById("checkCode").innerHTML = code;
}
function validate () {
var inputCode = document.getElementById("checkNum").value.toUpperCase();
if(inputCode.length <=0) {
alert("請輸入驗證碼！");
return false;
}
else if(inputCode != code ){
alert("驗證碼輸入錯誤！");
createCode();
return false;
}
else {
alert("驗證碼通過！");
return true;
}
}
2.html
<body onload="createCode();"> <input type="text" value="" id="checkNum" /> <a id="checkCode" onclick="createCode()"></a> <input type="button" class="btnCheck" id="gotoCheck" value="驗證" onclick="validate();" />
以上所述是小編給大家介紹的JavaScript登錄驗證碼的實現(xiàn)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了利用js canvas實現(xiàn)五子棋游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
javascript中將Object轉(zhuǎn)換為String函數(shù)代碼 (json str)
下面的代碼就是想將Object轉(zhuǎn)換為String函數(shù),需要的朋友可以參考下2012-04-04
Typescript定義多個接口類型聲明的方式小結(jié)
這篇文章主要介紹了Typescript定義多個接口類型聲明的方式小結(jié),在 TypeScript 中,您可以使用交叉類型(&)或聯(lián)合類型(|)來組合多個接口,從而實現(xiàn)多個接口類型的混合,文中通過代碼講解的非常詳細(xì),需要的朋友可以參考下2025-01-01
這篇文章主要介紹了a標(biāo)簽中href=""的幾種用法 ,需要的朋友可以參考下2017-08-08
moment.js使用方法總結(jié)(全網(wǎng)最全)
日常開發(fā)中通常會對時間進行下面這幾個操作,比如獲取時間,設(shè)置時間,格式化時間,比較時間等等,下面這篇文章主要給大家介紹了關(guān)于moment.js使用方法的相關(guān)資料,需要的朋友可以參考下2024-03-03
很多朋友都聽說過比特幣和以太幣這樣的加密貨幣，但是只有極少數(shù)人懂得隱藏在它們背后的技術(shù)，接下來通過本文給大家介紹用JavaScript來創(chuàng)建一個簡單的區(qū)塊鏈來演示它們的內(nèi)部究竟是如何工作的，感興趣的朋友一起看看吧2018-03-03
JavaScript中最容易混淆的作用域、提升、閉包知識詳解(推薦)
在web前端開發(fā)中js中的作用域，提升，閉包知識是經(jīng)常用到的也是很容易混淆的知識點，接下來小編整理了本教程幫助大家學(xué)習(xí)2016-09-09
JS繪圖Flot如何實現(xiàn)動態(tài)可刷新曲線圖
這篇文章主要介紹了JS繪圖Flot如何實現(xiàn)動態(tài)可刷新曲線圖,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-10-10
JavaScript展開運算符和剩余運算符的區(qū)別詳解
本文主要介紹了JavaScript展開運算符和剩余運算符的區(qū)別詳解，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
最近接觸了一下html5，當(dāng)然，接觸過html5的人都知道，html5也不過是提供一些新的標(biāo)簽而已，至于整下實現(xiàn)的核心，還是在javascript這里。2011-08-08