JS驗(yàn)證碼實(shí)現(xiàn)代碼
廢話不多說了,直接給大家貼代碼了,具體代碼如下所示:
<script language="javascript">
var code; //在全局 定義驗(yàn)證碼
function createCode()
{ //創(chuàng)建驗(yàn)證碼函數(shù)
code = "";
var codeLength =4;//驗(yàn)證碼的長度
var selectChar = 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');//所有候選組成驗(yàn)證碼的字符,當(dāng)然也可以用中文的
for(var i=0;i<codeLength;i++)
{
var charIndex =Math.floor(Math.random()*36);
code +=selectChar[charIndex];
}
// 設(shè)置驗(yàn)證碼的顯示樣式,并顯示
document.getElementById("discode").style.fontFamily="Fixedsys"; //設(shè)置字體
document.getElementById("discode").style.letterSpacing="5px"; //字體間距
document.getElementById("discode").style.color="#0ab000"; //字體顏色
document.getElementById("discode").innerHTML=code; // 顯示
}
function but()
{//驗(yàn)證驗(yàn)證碼輸入是否正確
var val1=document.getElementById("t1").value;
var val2=code;
if(val1!=val2){
alert("驗(yàn)證碼錯(cuò)誤!");
document.getElementById('t1').value="";
}
}
</script>
驗(yàn)證碼框
<div class="input">
<input id="t1" type="text" name="u" placeholder="驗(yàn)證碼" onblur="but()" />
<span id="discode"></span>
<input type="button" value="換一換" class="c" style="height:20px;"onClick="createCode()">
</div>
效果

總結(jié)
以上所述是小編給大家介紹的JS驗(yàn)證碼實(shí)現(xiàn)代碼,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- JavaScript生成隨機(jī)驗(yàn)證碼代碼實(shí)例
- JS實(shí)現(xiàn)點(diǎn)擊發(fā)送驗(yàn)證碼 xx秒后重新發(fā)送功能
- php/JS實(shí)現(xiàn)的生成隨機(jī)密碼(驗(yàn)證碼)功能示例
- js實(shí)現(xiàn)隨機(jī)8位驗(yàn)證碼
- JS 驗(yàn)證碼功能的三種實(shí)現(xiàn)方式
- js+canvas實(shí)現(xiàn)滑動(dòng)拼圖驗(yàn)證碼功能
- js實(shí)現(xiàn)登錄注冊框手機(jī)號(hào)和驗(yàn)證碼校驗(yàn)(前端部分)
- JS如何實(shí)現(xiàn)手機(jī)端輸入驗(yàn)證碼效果
相關(guān)文章
js實(shí)現(xiàn)帶圓角的兩級(jí)導(dǎo)航菜單效果代碼
這篇文章主要介紹了js實(shí)現(xiàn)帶圓角的兩級(jí)導(dǎo)航菜單效果代碼,涉及javascript鼠標(biāo)事件及頁面元素樣式動(dòng)態(tài)變換技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08
JS中BOM相關(guān)知識(shí)點(diǎn)總結(jié)(必看篇)
下面小編就為大家?guī)硪黄狫S中BOM相關(guān)知識(shí)點(diǎn)總結(jié)(必看篇)。小編覺得挺不錯(cuò)的,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧,祝大家游戲愉快哦2016-11-11
JS中的Replace方法使用經(jīng)驗(yàn)分享
本文給大家分享的是我們在使用javascript中的replace方法的時(shí)候需要注意的一個(gè)事項(xiàng),我就是沒有注意到,才被這個(gè)bug煩了好久,這里記錄下來,有需要的小伙伴可以參考下。2015-05-05
微信小程序?qū)崿F(xiàn)之手勢鎖功能實(shí)例代碼
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)之手勢鎖功能的實(shí)例代碼,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-07-07
原生JavaScript實(shí)現(xiàn)批量獲取表單數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了如何使用原生JavaScript實(shí)現(xiàn)批量獲取表單數(shù)據(jù),文中的示例代碼講解詳細(xì),有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
js原生實(shí)現(xiàn)移動(dòng)端手指滑動(dòng)輪播圖效果的示例
下面小編就為大家分享一篇js原生實(shí)現(xiàn)移動(dòng)端手指滑動(dòng)輪播圖效果的示例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-01-01
JS實(shí)現(xiàn)探測網(wǎng)站鏈接的方法【測試可用】
這篇文章主要介紹了JS實(shí)現(xiàn)探測網(wǎng)站鏈接的方法,通過網(wǎng)站返回錯(cuò)誤響應(yīng)觸發(fā)onerror時(shí)間來判斷網(wǎng)站鏈接的可用性,非常簡便實(shí)用,需要的朋友可以參考下2016-11-11

