jQuery外掛程式實現靜態HTML驗證碼校正_jquery

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 ? 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個字元的字母驗證碼，漢字驗證碼更具有安全性。因此，通過對驗證碼安全的研究，可以更加領略到中華文化的博大精深，原來密碼驗證也可以這樣玩！

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