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

先看一下效果（傳送門>>)：

一、功能介紹

可從預(yù)設(shè)的文字庫中隨機(jī)抽取3個待驗證的字，上方顯示抽取出來的文字及順序，下方隨機(jī)生成3個待點選的文字的位置和角度。用戶需按指定順序點選，只有點選順序完整正確才能成功。接下來開始分享它的設(shè)計。

二、外觀設(shè)計

如下圖，需要的內(nèi)容主要有：

• 6個矩形，用來放從字庫中隨機(jī)抽出來的字，3個在上方，用來提示用戶需要點選的文字和順序，3個在下方，用來給用戶點選。
• 1個刷新按鈕，按鈕的主要作用是在用戶覺得當(dāng)前驗證碼太難（比如生成的待點選文字重疊在一起，難以分辨如何點選）時，重新生成驗證碼。
• 1個確認(rèn)按鈕，觸發(fā)驗證碼校驗。
• 1個成功提示。
• 1個錯誤提示。

除了以上的內(nèi)容之外，我們還需要幾個全局變量：

• WordStock：用來存儲生成點選文字的字庫
• Validation：待驗證的文字及順序
• Choice：用戶點選的文字及順序
• Vldt_Result：驗證結(jié)果，這個項目用不到這個，主要是提供給想把這個項目嵌入到自己項目的朋友使用，可以在提交表單的時候，直接讀取這個變量是否等于 True 來判斷驗證碼的驗證結(jié)果。接下來我們開始寫邏輯。

三、生成待驗證文字及待點選文字

如下圖，首先待驗證的文字是從字庫隨機(jī)抽取出來的，取出來之后，待驗證和待點選文字都同時【設(shè)置文本】為所抽取的文字，然后再把這個文字【追加】到變量【Validation】中， concat 的作用就是在原來的文字基礎(chǔ)上追加文字，而不會把原來的文字覆蓋掉，待選2和待選3的文字都是按照上述的邏輯配置。

接著來給待選擇的文字添加邏輯：

【載入時】的事件是生成一個【-45° ~ 45°】的隨機(jī)角度和在背景圖片尺寸內(nèi)生成一個隨機(jī)位置，然后【旋轉(zhuǎn)】和【移動】對應(yīng)的文字；

【單擊時】判斷當(dāng)前的文字是否已經(jīng)被點選，如果未被點選，就【設(shè)置選中】，并將當(dāng)前選中的文字【追加】到變量【Choice】中，一定要寫判斷條件，否則每點擊一次，就會追加一次文字。

四、刷新按鈕

刷新按鈕的邏輯比較簡單，大家看一下圖即可，主要就是做一些初始化和觸發(fā)一些元件的載入事件：

五、確認(rèn)按鈕

確認(rèn)按鈕直接比較變量【Choice】和【Validation】就可以，如果兩個完全相等，就將【Vldt_Result】設(shè)置為【True】，并顯示驗證成功提示，如果不相等，表示驗證失敗，就顯示驗證失敗提示，然后觸發(fā)刷新按鈕。

這樣，這個驗證碼就做完了，如果本教程對你有用，歡迎“收藏”或點擊“喜歡”，感謝閱讀！