為了防止暴力注冊或爬蟲爬取等機(jī)器請求，需要驗(yàn)證操作者是人還是機(jī)器，便有了驗(yàn)證碼這個設(shè)計(jì)。本文作者主要介紹了如何使用 Axure 來設(shè)計(jì)一個動態(tài)的圖形驗(yàn)證碼，一起來學(xué)習(xí)一下吧。

在軟件設(shè)計(jì)中，為了防止暴力注冊或爬蟲爬取等機(jī)器請求，需要驗(yàn)證操作者本尊是人還是機(jī)器，因此催生了驗(yàn)證碼這個設(shè)計(jì)，目前驗(yàn)證碼已經(jīng)衍生出許多的形式，包括圖形驗(yàn)證、數(shù)學(xué)運(yùn)算、點(diǎn)選文字、滑動拼圖等，本文作者主要介紹怎么使用 Axure 來設(shè)計(jì)一個動態(tài)的圖形驗(yàn)證碼。

一、驗(yàn)證碼外觀

驗(yàn)證碼的外觀設(shè)計(jì)大家可以各自發(fā)揮自己的創(chuàng)意，以下是我繪制的，僅供大家參考：

可以給大家提供幾點(diǎn)思路：

1. 使用識別和閱讀有一定難度的字體，比如帶傾斜、描邊或變形的一些字體
2. 添加干擾因素，比如線條、背景等
3. 設(shè)置跟背景相近或相似的字體顏色

原則就是能夠盡可能干擾用戶對文字的識別，當(dāng)然，不能讓用戶完全識別不出來，不然就失去了它存在的意義。

二、驗(yàn)證碼字庫

常規(guī)的圖形驗(yàn)證碼文字主要由大小寫字母+數(shù)字組成，因此我們需要將所有會用到的文字放到字庫中，生成的時候只需要從字庫中挑選即可。為了方便調(diào)用，我們使用【全局變量】來存儲字庫，在 Axure 頂部菜單中找到【項(xiàng)目】，點(diǎn)開之后選擇【全局變量】：

接著我們添加一個全局變量【code_library】并輸入默認(rèn)值，默認(rèn)值是【0-9，A-Z，a-z】的所有字符：

三、驗(yàn)證碼位數(shù)

一般常見圖形驗(yàn)證碼都是4位，現(xiàn)在也有一些平臺為了提升難度，會增加到5位或6位，為了能夠靈活控制驗(yàn)證碼位數(shù)，我們也同樣通過變量來控制位數(shù)的生成，在【全局變量】中添加【code_bits】，默認(rèn)值是4：

四、驗(yàn)證碼存儲

我們生成驗(yàn)證碼的時候，并不是一下子就從字庫中挑選出指定位數(shù)的驗(yàn)證碼，而是一個一個字符挑選出來，最終組成指定位數(shù)的驗(yàn)證碼，在挑選過程中，需要有一個變量來存儲已經(jīng)挑選出來的字符，所以，我們還需要一個變量，用來存儲生成的驗(yàn)證碼，在【全局變量】中添加【code】，無需默認(rèn)值：

五、驗(yàn)證碼生成器

上文提到，我們需要按指定位數(shù)從字庫中逐一挑選字符來組成驗(yàn)證碼，也就是說，驗(yàn)證碼的生成過程是一個循環(huán)的過程，因此，我們可以使用一個【動態(tài)面板】來作為驗(yàn)證碼的生成器，當(dāng)動態(tài)面板循環(huán)的時候，按照指定的位數(shù)從字庫中挑選字符（動態(tài)面板如何循環(huán)調(diào)用可參考我之前發(fā)過的文章《【Axure 動態(tài)面板】讓你的動畫變成“永動機(jī)”》），所以，這里我們先在頁面中拖入一個動態(tài)面板，并確保動態(tài)面板中至少有2個狀態(tài)（狀態(tài)中無需放置任何內(nèi)容，Axure 9.0 建議將動態(tài)面板拖動到【負(fù)空間】）：

至此，我們所有的準(zhǔn)備工作就做完了，接下來我們就來實(shí)現(xiàn)驗(yàn)證碼的生成邏輯。

六、驗(yàn)證碼生成思路

首先，我們先來拆解一下生成的步驟：

總結(jié)一下思路：

1. 當(dāng)驗(yàn)證碼載入或被點(diǎn)擊時，驗(yàn)證碼生成器【動態(tài)面板】開始循環(huán)；
2. 生成器循環(huán)時，判斷驗(yàn)證碼【code】的長度是否等于指定的位數(shù)【code_bits】，如果是，表示已經(jīng)從字庫【code_liabrary】中挑選出足夠字符，這時可以停止生成器循環(huán)，并把驗(yàn)證碼顯示出來；
3. 如果驗(yàn)證碼的長度【code】不等于指定位數(shù)【code_bits】，表示還沒有挑選出足夠的字符，這個時候就從字庫【code_library】隨機(jī)挑選一個字符添加到驗(yàn)證碼【code】中，直到字符數(shù)滿足指定的位數(shù)，停止生成器循環(huán)并將驗(yàn)證碼顯示出來。

思路基本清晰了，但在動手之前，我們還需要知道這個設(shè)計(jì)中的一個難點(diǎn)，就是怎么從字庫【code_library】中【隨機(jī)】挑選一個字符，這里就會涉及到幾個【函數(shù)表達(dá)式】：

1. LVAR.charAt(index)：我們可以用這個函數(shù)來從字庫【code_library】中取字符，這個函數(shù)的作用是從字符串【LVAR】中取出排在【index】位置的字符，這里需要注意，【index】的索引值是從0開始的，也就是說，index = 0 表示取出第一個字符，index = 1 表示取出第二個字符，以此類推，最后一個字符的 index = LVAR.length-1。
2. Math.random()：我們可以用這個函數(shù)作為上述函數(shù)的索引值【index】，隨機(jī)生成取值的索引，這個函數(shù)的作用是隨機(jī)生成0-1的小數(shù)，如果我們要隨機(jī)生成0-n的小數(shù)，我們只需要將 Math.random() 乘以 n（Math.random() * n） 就行了，這個 n 的取值需要確保在字庫的長度范圍內(nèi)，超過字庫的長度范圍就會取不到值，所以 n = code_library.length-1 ( index 索引是從0開始，所以要減去1，否則當(dāng) n = code_library.length 時會取不到值。
3. Math.floor(x)：Math.random() 生成的是小數(shù)，但LVAR.charAt(index) 中的 index 必須是整數(shù)，所以我們可以通過這個函數(shù)來對Math.random() 生成的小數(shù)進(jìn)行取整，這個函數(shù)的作用是返回 x 的下舍整數(shù)，簡單說就是將生成的結(jié)果，只保留整數(shù)，舍去小數(shù)部分，例：Math.floor(1.23) = 1。

所以要從字庫中隨機(jī)取值，完整的函數(shù)表達(dá)式就是：code_library.charAt(Math.floor(Math.random()*(code_library.length-1)))。

這下，我們可以開始動手進(jìn)行配置了。

七、生成驗(yàn)證碼

首先給驗(yàn)證碼添加點(diǎn)擊事件，【單擊時】開啟驗(yàn)證碼生成器（動態(tài)面板）循環(huán)，循環(huán)間隔設(shè)為0毫秒即可：

接著，我們給驗(yàn)證碼生成器添加【狀態(tài)改變時】的事件，這里需要區(qū)分兩種場景：

場景1：驗(yàn)證碼位數(shù)=指定位數(shù)，表示驗(yàn)證碼生成成功，我們只需要停止生成器循環(huán)并把驗(yàn)證碼顯示出來即可：

場景2：驗(yàn)證碼位數(shù)≠指定位數(shù)，表示驗(yàn)證碼未生成成功，需要從字庫中隨機(jī)挑選一個字符添加到驗(yàn)證碼【code】中：

上圖中后半部分的表達(dá)式上文已經(jīng)解釋過了，這里就不再贅述，關(guān)于為什么要在那個表達(dá)式前面加上[[code]]，這里解釋一下：

假設(shè)驗(yàn)證碼生成器循環(huán)4次，每次從字庫中抽出的字符分別是1、2、3、4，如果不加[[code]]，則循環(huán)4次分別是以下4種結(jié)果：

1. 第一次循環(huán)：1
2. 第二次循環(huán)：2
3. 第三次循環(huán)：3
4. 第四次循環(huán)：4

從上面4次循環(huán)的結(jié)果可以看出，每次生成之后都會給【code】重新賦值，所以【code】永遠(yuǎn)都只會有一個數(shù)字，就會陷入無限的循環(huán)中，而在前面添加[[code]]之后，4次循環(huán)的結(jié)果是：

1. 第一次循環(huán)：1
2. 第二次循環(huán)：12
3. 第三次循環(huán)：123
4. 第四次循環(huán)：1234

因?yàn)槊恳淮窝h(huán)都會將之前已經(jīng)生成的【code】拼接到新生成的【code】，再重新賦值給【code】，所以才能形成上述這種追加內(nèi)容的效果，然后在第四次循環(huán)結(jié)束之后，驗(yàn)證碼【code】長度滿足指定長度，退出循環(huán)并顯示驗(yàn)證碼，接下來我們在瀏覽器中看看效果：

效果是對的，但是只有第一次點(diǎn)擊有效，后面怎么點(diǎn)擊都不會變化，哪里出了問題呢？

我們來分析一下，既然第一次點(diǎn)擊能生成說明隨機(jī)生成驗(yàn)證碼的邏輯是沒有問題的，那問題應(yīng)該是出在判斷驗(yàn)證碼位數(shù)的那個邏輯上，原來，【code】默認(rèn)是空的，所以第一次點(diǎn)擊的時候能夠正常生成，但是第二次點(diǎn)擊的時候，因?yàn)椤綾ode】已經(jīng)有值，所以不會再次生成，所以這里我們在點(diǎn)擊驗(yàn)證碼時，應(yīng)該先清空【code】：

這樣就能確保每次點(diǎn)擊驗(yàn)證碼時【code】都沒有值，才能夠正常生成，再來看看修改后的效果：

現(xiàn)在還有一個問題，就是驗(yàn)證碼在載入時就會自動生成，但目前還是顯示我們設(shè)置的默認(rèn)文本，這里我們做個簡單的優(yōu)化，你可以將驗(yàn)證碼【單擊時】的事件復(fù)制粘貼到驗(yàn)證碼【載入時】的事件中，不過這里有一種更簡單的方式，就是給驗(yàn)證碼【載入時】添加觸發(fā)驗(yàn)證碼【單擊時】的事件，簡單說就是在驗(yàn)證碼載入時自動點(diǎn)擊自身并生成：

刷新頁面看看效果：

最后，來驗(yàn)證一下驗(yàn)證碼位數(shù)控制的功能是否正常，將【code_bits】改為6，再看看效果：

跟預(yù)期效果是一樣的，至此，全部教程結(jié)束，感謝閱讀。