jQuery由美國(guó)人John Resig創(chuàng)建，它是一個(gè)快速、簡(jiǎn)潔的JavaScript庫(kù)，提供了很多遍歷函數(shù)，如each(fn)。jQuery能夠使用戶的html頁(yè)保持代碼和html內(nèi)容分離，也就是說(shuō)，不用再在html里面插入一堆js來(lái)調(diào)用命令了，只需定義id即可。正是這些操作上的特點(diǎn)，用戶可以方便地處理HTML文檔、事件、實(shí)現(xiàn)動(dòng)畫效果，并且方便地為網(wǎng)站提供交互。如今，jQuery已經(jīng)吸引了來(lái)自世界各地的眾多JavaScript高手加入。

這里所要講到的jQuery Real Person Plugin，就是一個(gè)完全由JavaScript編寫而成的jQuery驗(yàn)證碼插件。

jQuery Real Person Plugin主要實(shí)現(xiàn)了字母和字母數(shù)字混合兩種驗(yàn)證方式，可以有效地防止自動(dòng)提交表單。其外觀展示提供了定制功能，默認(rèn)是6位字母，如圖1所示。

根據(jù)需要，也可以定制8位長(zhǎng)度的驗(yàn)證碼，如圖2所示。

或者是字母數(shù)字混合式的驗(yàn)證碼，如圖3所示。

此外，用戶也可以對(duì)底部的文字進(jìn)行定制，如圖4所示。

看到這些各具特色而且功能強(qiáng)大的驗(yàn)證界面，我們能否自己也來(lái)實(shí)現(xiàn)呢？答案是肯定的。下面，通過(guò)循序漸進(jìn)的講解，對(duì)jQuery Real Person Plugin的驗(yàn)證過(guò)程進(jìn)行分析。
第1步，使用這個(gè)驗(yàn)證功能之前，引入JavaScript、CSS文件。

<script type="text/JavaScript" src="Scripts/jquery-1.3.2.js"></script>
<script type="text/JavaScript" src="Scripts/jquery.realperson.js"></script>
<style type="text/css">@import "Styles/jquery.realperson.css";</style>

在上面的代碼中，第1行引入jQuery類庫(kù)，可以到官方網(wǎng)站載最新jQuery類庫(kù)。第2行引入驗(yàn)證碼插件類庫(kù)jquery.realperson.js。第3行引入驗(yàn)證碼樣式文件jquery.realperson.css。網(wǎng)站界面如圖5所示。

第2步，頁(yè)面中放入文本框元素，也就是HTML部分。

<table>
<tr>
<td><input type="text" id="txtValidate" name="defaultReal"></td>
</tr>
<tr>
<td><asp:Button ID="btnSubmit" runat="server" Text="登錄" /></td>
</tr>
</table>

在上面的代碼中，第1行使用兩行一列進(jìn)行布局，一行用于存放文本框，一行用于存放登錄按鈕。第3行定義id=”txtValidate”的文本框，用于輸入驗(yàn)證碼。第6行定義id=”btnSubmit”的提交按鈕，用于觸發(fā)后臺(tái)事件，從而登錄系統(tǒng)。
第3步，頁(yè)面初始化時(shí)，調(diào)用驗(yàn)證碼插件，以便于初始化驗(yàn)證碼顯示。

<script>
$(document).ready(function () {
$("#txtValidate").realperson({ length: 5 });
}
);
</script>

在上面的代碼中，第2行為頁(yè)面加載時(shí)所進(jìn)行的操作，相當(dāng)于頁(yè)面的onLoad事件。第3行調(diào)用驗(yàn)證碼控件的接口，用于顯示驗(yàn)證碼。
第4步，核心代碼分析。

/* 核心代碼
@param target (jQuery) the input field
@param inst (object) the current instance settings
@return (string) the additional content */
_generateHTML: function(target, inst) {
var text = '';
for (var i = 0; i < inst.settings.length; i++) {
text += CHARS.charAt(Math.floor(Math.random() *
(inst.settings.includeNumbers ? 36 : 26)));
}
 var html = '<div class="realperson-challenge"><div class="realperson-text">';
 for (var i = 0; i < DOTS[0].length; i++) {
 for (var j = 0; j < text.length; j++) {
 html += DOTS[CHARS.indexOf(text.charAt(j))][i] + ' ';
}
html += '\n';
}
html += '</div><div class="realperson-regen">' + inst.settings.regenerate +
'</div></div><input type="hidden" class="realperson-hash" name="' +
inst.settings.hashName.replace(/\{n\}/, target.attr('name')) +
'" value="' + this._hash(text) + '">';
return html;

在上面的代碼中，第7～9行用于生成驗(yàn)證碼隨機(jī)字符。第12～22行用于把背景字符和隨機(jī)字符組裝成HTML代碼，輸出到瀏覽器。

通過(guò)上述剖析，可以看到，驗(yàn)證碼對(duì)于密碼安全具有十分重要的作用。聯(lián)想到銀行賬戶的安全問(wèn)題，比如黑客通過(guò)其他途徑獲得了銀行賬戶，然后打開其網(wǎng)上銀行的登錄界面。使用瀏覽器中查看源代碼的方式，分析登錄界面HTML代碼，發(fā)現(xiàn)頁(yè)面中沒有驗(yàn)證碼，也沒有其他的安全設(shè)置，只使用了HTTP協(xié)議；黑客竊喜，于是就可以使用程序來(lái)模擬瀏覽器向銀行服務(wù)器提交賬戶和密碼。密碼一般是6位的阿拉伯?dāng)?shù)字，正確密碼的可能性就是10的6次方，也就是100萬(wàn)次。黑客會(huì)找一臺(tái)高性能、高帶寬的電腦，運(yùn)行套取銀行密碼程序，假設(shè)這臺(tái)電腦1秒鐘能測(cè)試10個(gè)密碼，10萬(wàn)秒鐘（也就是27小時(shí)，一天左右）的時(shí)間就可以把所有的密碼運(yùn)行一遍，實(shí)際上黑客用不了那么長(zhǎng)時(shí)間就已經(jīng)竊取到了密碼，銀行帳號(hào)的錢也就會(huì)被轉(zhuǎn)走。也就是說(shuō)，若沒有驗(yàn)證碼，黑客使用套取銀行密碼程序，在一天左右的時(shí)間就能輕而易舉地獲得非法收入。

在實(shí)際應(yīng)用中，漢字驗(yàn)證碼也是比較常見的驗(yàn)證碼，它的原理是：從一個(gè)漢字集合中隨機(jī)抽選出幾個(gè)漢字，生成圖片以HTTP輸出流到頁(yè)面。如果客戶端輸入正確的漢字，則可以繼續(xù)操作，否則禁制登錄。中國(guó)上下五千年，文化博大精深，漢字?jǐn)?shù)量達(dá)9萬(wàn)多，相對(duì)只有10個(gè)位數(shù)的數(shù)字驗(yàn)證碼和26個(gè)字符的字母驗(yàn)證碼，漢字驗(yàn)證碼更具有安全性。因此，通過(guò)對(duì)驗(yàn)證碼安全的研究，可以更加領(lǐng)略到中華文化的博大精深，原來(lái)密碼驗(yàn)證也可以這樣玩！

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。

最新評(píng)論