2023年【Axure 教程】驗證碼除了 12306我還沒有服過誰（圖形驗證篇）

【Axure教程】驗證碼，除了12306，我還沒有服過誰（圖形驗證篇）在軟件設(shè)計中，為了防止暴力注冊或爬蟲爬取等機器懇求，需要驗證操本尊是人還是機器，因此催生了驗證碼這個設(shè)計，目前驗證碼已經(jīng)衍生出很多的形式，包括圖形驗證、數(shù)學運算、點選文字、滑動拼圖等，本文主要介紹怎么使用Axure來設(shè)計一個動態(tài)的圖形驗證碼。

一、驗證碼外觀

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

可以給大家供應幾點思路：

使用識別和閱讀有肯定難度的字體，比如帶傾斜、描邊或變形的一些字體添加干擾因素，比如線條、背景等設(shè)置跟背景相近或相像的字體顏色原則就是能夠盡可能干擾用戶對文字的識別，當然，不能讓用戶完全識別不出來，不然就失去了它存在的意義。

二、驗證碼字庫

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

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

三、驗證碼位數(shù)

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

四、驗證碼存儲

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

五、驗證碼生成器

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

至此，我們?nèi)康念A備工作就做完了，接下來我們就來實現(xiàn)驗證碼的生成規(guī)律。

六、驗證碼生成思路

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

總結(jié)一下思路：

當驗證碼載入或被點擊時，驗證碼生成器【動態(tài)面板】開頭循環(huán)；生成器循環(huán)時，推斷驗證碼【code】的長度是否等于指定的位數(shù)【code_bits】，假如是，表示已經(jīng)從字庫【code_liabrary】中選擇出足夠字符，這時可以停止生成器循環(huán)，并把驗證碼顯示出來；假如驗證碼的長度【code】不等于指定位數(shù)【code_bits】，表示還沒有選擇出足夠的字符，這個時候就從字庫【code_library】隨機選擇一個字符添加到驗證碼【code】中，直到字符數(shù)滿意指定的位數(shù)，停止生成器循環(huán)并將驗證碼顯示出來。思路基本清楚了，但在動手之前，我們還需要知道這個設(shè)計中的一個難點，就是怎么從字庫【code_library】中【隨機】選擇一個字符，這里就會涉及到幾個【函數(shù)表達式】：

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

這下，我們可以開頭動手進行配置了。

七、生成驗證碼

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

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

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

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

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

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

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

第一次循環(huán)：1其次次循環(huán)：12第三次循環(huán)：123第四次循環(huán)：1234由于每一次循環(huán)都會將之前已經(jīng)生成的【code】拼接到新生成的【code】，再重新賦值給【code】，所以才能形成上述這種追加內(nèi)容的效果，然后在第四次循環(huán)結(jié)束之后，驗證碼【code】長度滿意指定長度，退出循環(huán)并顯示驗證碼，接下來我們在掃瞄器中看看效果：

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

我們來分析一下，既然第一次點擊能生成說明隨機生成驗證碼的規(guī)律是沒有問題的，那問題應當是出在推斷驗證碼位數(shù)的那個規(guī)律上，原來，【code】默認是空的，所以第一次點擊的時候能夠正常生成，但是其次次點擊的時候，由于【code】已經(jīng)有值，所以不會再次生成，所以這里我們在點擊驗證碼時，應當先清空【code】：

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

現(xiàn)在還有一個問題，就是驗證碼在載入時就會自動生成，但目前還是顯示我們設(shè)置的默認文本，這里我們做個簡潔的優(yōu)化，你可以將驗證碼【單擊時】的大事復制粘貼到驗證碼【載入時】的大事