js實現(xiàn)簡單的驗證碼

更新時間：2015年12月25日 07:52:30 作者：我是代碼努力

這篇文章主要介紹了js實現(xiàn)簡單驗證碼的方法，驗證碼主要是為了網(wǎng)站的安全性，防止惡意注冊和登陸，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

驗證碼大家應(yīng)該不陌生，主要是為了網(wǎng)站的安全性，防止惡意注冊和登陸。驗證碼實現(xiàn)的方式各有不同，下面是一段用javascript實現(xiàn)的驗證碼效果，供大家參考之用，希望能夠給大家?guī)韼椭?/p>

運行效果圖：

代碼如下：

<html>
<head>
<title>js驗證碼</title>
<style type="text/css">
.code 
{
 background:url(code_bg.jpg);
 font-family:Arial;
 font-style:italic;
 color:blue;
 font-size:30px;
 border:0;
 padding:2px 3px;
 letter-spacing:3px;
 font-weight:bolder;
 float:left;
 cursor:pointer;
 width:150px;
 height:60px;
 line-height:60px;
 text-align:center;
 vertical-align:middle;
}
a 
{
 text-decoration:none;
 font-size:12px;
 color:#288bc4;
}
a:hover 
{
 text-decoration:underline;
}
</style>
<script type="text/javascript">
var code;
function createCode() 
{
 code = "";
 var codeLength = 6; //驗證碼的長度
 var checkCode = document.getElementById("checkCode");
 var codeChars = 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',
   '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'); //所有候選組成驗證碼的字符，當(dāng)然也可以用中文的
 for(var i = 0; i < codeLength; i++) 
 {
 var charNum = Math.floor(Math.random() * 52);
 code += codeChars[charNum];
 }
 if(checkCode) 
 {
 checkCode.className = "code";
 checkCode.innerHTML = code;
 }
}
function validateCode() 
{
 var inputCode=document.getElementById("inputCode").value;
 if(inputCode.length <= 0) 
 {
 alert("請輸入驗證碼！");
 }
 else if(inputCode.toUpperCase() != code.toUpperCase()) 
 {
  alert("驗證碼輸入有誤！");
  createCode();
 }
 else 
 {
 alert("驗證碼正確！");
 }  
} 
</script>
</head>
<body onload="createCode()">
<form id="form1" runat="server" onsubmit="validateCode()">
 <div>
 <table border="0" cellspacing="5" cellpadding="5" >
  <tr>
  <td></td>
  <td><div class="code" id="checkCode" onclick="createCode()" ></div></td>
  <td><a href="#" onclick="createCode()">看不清換一張</a></td>
  </tr>
  <tr>
  <td>驗證碼：</td>
  <td><input style="float:left;" type="text" id="inputCode" /></td>
  <td>請輸入驗證碼</td>
  </tr>
  <tr>
  <td></td>
  <td><input id="Button1" onclick="validateCode();" type="button" value="確定" /></td>
  <td></td>
  </tr>
 </table>
 </div>
</form>
</body>
</html>

希望本文所述對大家學(xué)習(xí)javascript程序設(shè)計有所幫助。

您可能感興趣的文章:

js
驗證碼

相關(guān)文章

?js中toString()函數(shù)與valueOf()函數(shù)使用與區(qū)別
在等于運算符中，如果比較的內(nèi)容包含對象類型數(shù)據(jù)，則會涉及隱式轉(zhuǎn)換，那么就會調(diào)用toString()函數(shù)和valueOf()函數(shù)，本文主要介紹了?js中toString()函數(shù)與valueOf()函數(shù)使用與區(qū)別，感興趣的可以了解一下
2022-04-04
uniapp中常用的事件處理方法詳解
在UniApp中事件處理非常重要,通過事件處理可以實現(xiàn)用戶與應(yīng)用程序之間的交互,這篇文章主要給大家介紹了關(guān)于uniapp中常用的事件處理方法的相關(guān)資料,需要的朋友可以參考下
2023-12-12
Bootstarp在pycharm中的安裝及簡單的使用方法
這篇文章主要介紹了Bootstarp在pycharm中的安裝及簡單的使用方法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-04-04
uniapp插件uview下表單無法動態(tài)校驗的問題解決
最近項目中用到了uview?在做表單時用到了校驗,發(fā)現(xiàn)校驗不友好的結(jié)果,下面這篇文章主要給大家介紹了關(guān)于uniapp插件uview下表單無法動態(tài)校驗的問題解決,需要的朋友可以參考下
2022-12-12
javascript實現(xiàn)狀態(tài)欄中文字動態(tài)顯示的方法
這篇文章主要介紹了javascript實現(xiàn)狀態(tài)欄中文字動態(tài)顯示的方法,涉及JavaScript基于時間函數(shù)動態(tài)操作頁面元素屬性的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-10-10
Handtrack.js庫實現(xiàn)實時監(jiān)測手部運動(推薦)
這篇文章主要介紹了實時監(jiān)測手部運動的 JS 庫，可以實現(xiàn)很多有趣功能,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2021-02-02
原生js獲取iframe中dom元素--父子頁面相互獲取對方dom元素的方法
下面小編就為大家?guī)硪黄鷍s獲取iframe中dom元素--父子頁面相互獲取對方dom元素的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-08-08
RGB轉(zhuǎn)換實現(xiàn)代碼，淘寶前端開發(fā)工程師筆試題
寫一個轉(zhuǎn)換RGB的值的函數(shù)，實現(xiàn)以下效果。
2010-11-11
解決WebStorm?2022.3.x?無法識別?Element?UI?2.15.11?新版本中的?el-
這篇文章主要介紹了解決?WebStorm?2022.3.x?無法識別?Element?UI?2.15.11?新版本中的?el-xxx?標(biāo)簽問題,本文給大家分享兩種解決方案，需要的朋友可以參考下
2023-01-01
JS實現(xiàn)的漢字與Unicode碼相互轉(zhuǎn)化功能分析
這篇文章主要介紹了JS實現(xiàn)的漢字與Unicode碼相互轉(zhuǎn)化功能,結(jié)合實例形式分析了javascript實現(xiàn)漢字與Unicode碼轉(zhuǎn)換相關(guān)操作技巧與注意事項,需要的朋友可以參考下
2018-05-05