js生成的驗(yàn)證碼的實(shí)現(xiàn)與技術(shù)分析
更新時(shí)間：2014年09月17日 09:59:28 投稿：hebedich
本文主要是分享了一段由JS生成驗(yàn)證碼并驗(yàn)證的代碼，非常簡(jiǎn)單，并分析了此方法的實(shí)用性，提供給大家參考下
分享給大家一段js生成驗(yàn)證碼并驗(yàn)證的代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JS生成驗(yàn)證碼</title>
<style type="text/css">
.code {
background-image: url(code.jpg);
font-family: Arial;
font-style: italic;
color: Red;
border: 0;
padding: 2px 3px;
letter-spacing: 3px;
font-weight: bolder;
}
.unchanged {
border: 0;
}
</style>
<script language="javascript" type="text/javascript">
var code; //在全局 定義驗(yàn)證碼
function createCode() {
code = "";
var codeLength = 6;//驗(yàn)證碼的長(zhǎng)度
var checkCode = document.getElementById("checkCode");
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];
}
//alert(code);
if (checkCode) {
checkCode.className = "code";
checkCode.value = code;
}
}
function validate() {
var inputCode = document.getElementById("input1").value;
if (inputCode.length <= 0) {
alert("請(qǐng)輸入驗(yàn)證碼！");
} else if (inputCode != code) {
alert("驗(yàn)證碼輸入錯(cuò)誤！");
createCode();//刷新驗(yàn)證碼
} else {
alert("^-^ OK");
}
}
</script>
</head>
<body onload="createCode()">
<form action="#">
<input type="text" id="input1" /> <input type="text" onclick="createCode()" readonly="readonly" id="checkCode" class="unchanged" style="width: 80px" /><br />
<input id="Button1" onclick="validate();" type="button" value="確定" />
</form>
</body>
</html>
眾所周知，js是客戶端的，那么把驗(yàn)證都做在客戶端有意義嗎？還是必須從服務(wù)器生成的驗(yàn)證碼安全??？前端生成的驗(yàn)證碼安全嗎？
驗(yàn)證碼是動(dòng)態(tài)的，但要由客戶端識(shí)別，并返回正確數(shù)值才能正常驗(yàn)證。這是一個(gè)流程問(wèn)題，如果js的，那就是在客戶端處驗(yàn)證，基本等于沒(méi)有一樣！??！最好是服務(wù)器生成，客戶端驗(yàn)證，服務(wù)器確認(rèn)，正常瀏覽。這樣一個(gè)流程就萬(wàn)無(wú)一失
所以，本文僅僅是技術(shù)探討而已，千萬(wàn)別用在實(shí)際生產(chǎn)項(xiàng)目中
您可能感興趣的文章:
- Jsp生成頁(yè)面驗(yàn)證碼的方法[附代碼]
- JavaScript 驗(yàn)證碼的實(shí)例代碼(附效果圖)
- js實(shí)現(xiàn)簡(jiǎn)單的驗(yàn)證碼
- js實(shí)現(xiàn)點(diǎn)擊獲取驗(yàn)證碼倒計(jì)時(shí)效果
- JS 驗(yàn)證碼功能的三種實(shí)現(xiàn)方式
- js生成驗(yàn)證碼并直接在前端判斷
- js+canvas實(shí)現(xiàn)滑動(dòng)拼圖驗(yàn)證碼功能
- JS制作圖形驗(yàn)證碼實(shí)現(xiàn)代碼
- js實(shí)現(xiàn)登錄注冊(cè)框手機(jī)號(hào)和驗(yàn)證碼校驗(yàn)（前端部分）
- JavaScript實(shí)現(xiàn)驗(yàn)證碼案例
相關(guān)文章
js動(dòng)態(tài)設(shè)置div的值下例子
設(shè)置div的值想必大家都會(huì)吧，按要說(shuō)動(dòng)態(tài)設(shè)置想必知道的人及寥寥無(wú)幾了，下面有個(gè)不錯(cuò)的示例，希望對(duì)大家有所幫助2013-10-10
Javascript創(chuàng)建自定義對(duì)象 創(chuàng)建Object實(shí)例添加屬性和方法
創(chuàng)建自定義對(duì)象的最簡(jiǎn)單的方式就是創(chuàng)建一個(gè)Object實(shí)例，然后再為它添加屬性和方法2012-06-06
本篇文章主要介紹了p5.js入門教程之平滑過(guò)渡(Easing)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
js中如何對(duì)嵌套數(shù)組進(jìn)行filter過(guò)濾
這篇文章主要介紹了js中如何對(duì)嵌套數(shù)組進(jìn)行filter過(guò)濾問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06 
這篇文章主要介紹了JavaScript數(shù)組和循環(huán)詳解,本文講解了循環(huán)遍歷數(shù)組、按順序存儲(chǔ)和訪問(wèn)值、以相反的順序存儲(chǔ)和訪問(wèn)值、在數(shù)組中搜索等內(nèi)容,需要的朋友可以參考下
2015-04-04 
JavaScript具有類似Lambda表達(dá)式編程能力的代碼(改進(jìn)版)
在之前的一篇博文中我介紹了一種方法可以讓JavaScript具有一種近似于Lambda表達(dá)式的編程能力——但是它有一些缺點(diǎn)，其中妨礙它的使用的最主要的一條就是多了一層括號(hào)，讓代碼變得難以閱讀。
2010-09-09 
IE6/7/8中Option元素未設(shè)value時(shí)Select將獲取空字符串
可以看到當(dāng)忘記寫option的value時(shí)這些現(xiàn)代瀏覽器都會(huì)盡量返回正確的（客戶端程序員想要的）結(jié)果value，其容錯(cuò)性比IE6/7/8做的更好。
2011-04-04 
JavaScript 動(dòng)態(tài)改變圖片大小
本文作者通實(shí)際操作，發(fā)現(xiàn)可以用Javascript代碼簡(jiǎn)單實(shí)現(xiàn)：對(duì)于圖片大于100 X 100，則將其縮小為 100 X 100，若比這個(gè)小，則保持原圖大小。
2009-06-06 
javascript中html字符串轉(zhuǎn)化為jquery dom對(duì)象的方法
最近項(xiàng)目需求要開(kāi)發(fā)百度地圖相關(guān)的一個(gè)應(yīng)用，需要從硬編碼的html字符串中提取自己想要的元素以及屬性信息，由于在js中或者jq中操作元素節(jié)點(diǎn)以及屬性都是使用dom對(duì)象或者jq對(duì)象。下面介紹javascript中html字符串轉(zhuǎn)化為jquery dom對(duì)象的方法，需要的朋友可以參考下
2015-08-08