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

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

一、功能介紹

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

二、外觀設(shè)計(jì)

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

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

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

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

三、生成待驗(yàn)證文字及待點(diǎn)選文字

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

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

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

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

四、刷新按鈕

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

五、確認(rèn)按鈕

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

這樣，這個(gè)驗(yàn)證碼就做完了，如果本教程對(duì)你有用，歡迎“收藏”或點(diǎn)擊“喜歡”，感謝閱讀！