驗證碼校驗的前世今生及心得體會

筆者在大學時，曾給學校做過**，其中包含了使用者註冊登入功能。有使用者註冊登入，就需要有提交表單前的驗證碼校驗。

這裡需要說明的是，有些**的登入註冊一開始並不需要輸入驗證碼，但是在使用者名稱密碼輸入錯誤一次以上以後，驗證碼輸入框便會彈出。這麼做的動機，無疑是在大規模數量的註冊登入時，前端可以將多次錯誤請求擋在外面。可以有效防止機器註冊或登入對伺服器資源的侵占。

筆者剛接下這個**製作的工作時，才大三剛開學，對於驗證碼的生成與輸入校驗，可謂一竅不通，於是開始在網上找控制項或外掛程式，功夫不負有心人，終於找到一款封裝好的.net控制項，並順利的將它整合到登入功能中。這款控制項的程式集叫作vincent.autoauthcode.dll。大家可以直接搜尋得到。非常感謝這款外掛程式的作者及其分享者，幫助那時的我解決了這個問題。

這款驗證碼外掛程式的特點是：1.零**量，從工具箱中直接拖拽到頁面上即可

2.自動完成驗證，並在輸入時即時提示

3.多種屬性，能夠在一定程度內，做到驗證碼的自定義

以下是其使用方法的截圖：

最終效果如下圖：

然而在實際工作後，這款驗證碼外掛程式功能出現了瓶頸：

一方面，並不是說這外掛程式不好，而是隨著知識的增長和見識的提公升，我們可以考慮自己製作驗證碼了。當然，自己製作驗證碼，其自定義特性肯定比封裝好的外掛程式強很多，某些應用場景下，需要我們能夠自定義各種不同的驗證碼，甚至在驗證碼中加入漢字等。

另一方面：現在的b/s結構的web應用程式，mvc逐漸成為主流，ajax請求響應資料，依靠強大的前端js工具，我們可以將這些資料拼裝成我們想要的前台展示。從效能角度來說，服務端的工作被減少很多，大部分展示工作都交給客戶端來完成。在pc、移動裝置及瀏覽器js引擎高速發展的今天，這逐漸成為一種趨勢並能有效的提高應用程式效能。

筆者了解到：現在不少論壇已經提供了驗證碼的製作方案，所以在此粗略的描述下驗證碼的製作過程：

1.生成隨機數字或字母，甚至是漢字，可控制字元長度，一般長度在4-5。

2.利用生成的字串，繪製，設定的長度寬度等引數。

3.繪製的噪音點，我們看到的中的字元總有種亂花漸欲迷人眼的感覺，就是這麼做出來的。

4.繪製邊框。

5.將繪製好的儲存為流返回，筆者這裡使用的是一般處理程式。

context.response.clearcontent();
context.response.contenttype = "
image/gif";
memorystream ms =createcodeimages.createcodeimg(code);
if (null !=ms)

直接在html中呼叫一般處理程式，即可獲得驗證碼：

這裡我們自然儲存了中的字元，將它存在服務端，用來做使用者輸入的校驗。通常是儲存在session裡。

接下來就是自製驗證碼的呼叫工作，由於ajax請求涵蓋了我們和服務端互動的大部分工作，所以我們使用驗證碼也可以封裝在ajax請求裡，話不多說，上**：

///

/// ajax呼叫

///

/// ajax 引數

/// ajax success callback function

/// ajax error callback function

///驗證碼校驗時使用者的輸入

/// $.deferred

var ajaxwithcode = function
(options, callback, errorcallback, checkdata) ).done(
function
(result)  else
if (e1.status == 42)  
else
if (e1.status == 0) 
else
}}, options);
if(defaultoptions.data)
else
delete
defaultoptions.data;
var tt = $.ajax(defaultoptions).done(function
(data) 
});return
def;
}else
});};

我們可以自己封裝乙個ajax方法，將驗證碼的驗證放在前面，如果驗證碼錯誤，便給出錯誤提示，並阻止提交ajax請求，效果如下：

驗證碼校驗的前世今生及心得體會

BS模式驗證碼生成器及表單校驗

驗證碼的類及使用

驗證碼的原理作用及實現

驗證碼校驗的前世今生及心得體會

BS模式驗證碼生成器及表單校驗

驗證碼的類及使用

驗證碼的原理 作用及實現

相關推薦

驗證碼的原理作用及實現