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

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

一、功能介紹

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

二、外觀設計

如下圖，需要的內容主要有：

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

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

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

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

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

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

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

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

四、刷新按鈕

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

五、確認按鈕

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

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