首頁 > web前端 > js教程 > 主體

jQuery外掛實作靜態HTML驗證碼校驗_jquery

WBOY
發布: 2016-05-16 15:33:25
原創
1688 人瀏覽過

jQuery由美國人John Resig創建,它是一個快速、簡潔的JavaScript庫,提供了很多遍歷函數,如each(fn)。 jQuery能夠讓使用者的html頁保持程式碼和html內容分離,也就是說,不用再在html裡面插入一堆js來呼叫指令了,只要定義id即可。正是這些操作上的特點,使用者可以輕鬆處理HTML文件、事件、實現動畫效果,並且方便地為網站提供互動。如今,jQuery已經吸引了來自世界各地的眾多JavaScript高手加入。

這裡所要講到的jQuery Real Person Plugin,就是一個完全由JavaScript編寫而成的jQuery驗證碼插件。

jQuery Real Person Plugin主要實現了字母字母數字混合兩種驗證方式,可以有效地防止自動提交表單。其外觀展示提供了客製化功能,預設為6位字母,如圖1所示。

依需要,也可以自訂8位元長度的驗證碼,如圖2所示。

或是字母數字混合式的驗證碼,如圖3所示。

此外,使用者也可以對底部的文字進行定制,如圖4所示。

看到這些各具特色且功能強大的驗證介面,我們能否自己也來實現呢?答案是肯定的。下面,透過循序漸進的解說,對jQuery Real Person Plugin的驗證過程進行分析。
第1步,使用這個驗證功能之前,先引入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類別庫,可以到官方網站載最新jQuery類別庫。第2行引入驗證碼插件類別庫jquery.realperson.js。第3行引入驗證碼樣式檔jquery.realperson.css。網站介面如圖5所示。

第2步,頁面中放入文字方塊元素,也就是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行使用兩行一列進行佈局,一行用來存放文字框,一行用來存放登入按鈕。第3行定義id=”txtValidate」的文字框,用於輸入驗證碼。第6行定義id=”btnSubmit」的提交按鈕,用於觸發後台事件,從而登入系統。
步驟3,頁面初始化時,呼叫驗證碼插件,以便於初始化驗證碼顯示。

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

在上面的程式碼中,第2行為頁面載入時所進行的操作,相當於頁面的onLoad事件。第3行呼叫驗證碼控制項的接口,用於顯示驗證碼。
第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 &#63; 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行用於產生驗證碼隨機字元。第12~22行用來把背景字元和隨機字元組裝成HTML程式碼,輸出到瀏覽器。

透過上述剖析,可以看到,驗證碼對於密碼安全有著十分重要的作用。聯想到銀行帳戶的安全問題,例如駭客透過其他途徑獲得了銀行帳戶,然後打開其網路銀行的登入介面。使用瀏覽器中查看原始程式碼的方式,分析登入介面HTML程式碼,發現頁面中沒有驗證碼,也沒有其他的安全設置,只使用了HTTP協定;駭客竊喜,於是就可以使用程式來模擬瀏覽器向銀行伺服器提交帳戶和密碼。密碼一般是6位的阿拉伯數字,正確密碼的可能性就是10的6次方,也就是100萬次。駭客會找一台高效能、高頻寬的電腦,運行套取銀行密碼程序,假設這台電腦1秒鐘能測試10個密碼,10萬秒鐘(也就是27小時,一天左右)的時間就可以把所有的密碼運行一遍,實際上駭客用不了那麼長時間就已經竊取到了密碼,銀行帳號的錢也就會被轉走。也就是說,若沒有驗證碼,駭客使用套取銀行密碼程序,在一天左右的時間就能輕易獲得非法收入。

在實際應用中,漢字驗證碼也是比較常見的驗證碼,它的原理是:從一個漢字集合中隨機抽取幾個漢字,生成圖片以HTTP輸出流到頁面。如果用戶端輸入正確的漢字,則可以繼續操作,否則禁制登入。中國上下五千年,文化博大精深,漢字數量達9萬多,相對只有10個位數的數字驗證碼和26個字元的字母驗證碼,漢字驗證碼更具安全性。因此,透過對驗證碼安全的研究,可以更領略到中華文化的博大精深,原來密碼驗證也可以這樣玩!

以上就是本文的全部內容,希望對大家的學習有所幫助。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!