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

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

一、功能要點

1. 缺塊的位置是隨機的
2. 拼圖需根據缺塊的位置生成對應區域的預覽圖
3. 拖動時，如果不符合驗證成功的條件，需要將拼圖放回起始位置

接下來我們就來動手做一做。

二、外觀

首先最上面是提示條和刷新按鈕，然后是驗證碼主體，還需要一個驗證成功的提示：

驗證碼主體整體是一個動態面板，里面是這樣的：

背景圖是一張【圖片】；缺塊是一個【矩形】，填充了黑色，設置了50%的透明度；拼圖是一個【動態面板】，里面放了一張跟背景圖完全一樣的圖片，這里動態面板一定要設置與缺塊一樣的大小，不能讓動態面板自適應內容。

然后會用到以下全局變量：

• Tolerance：容差，用戶拖拽的時候，不一定剛好完全將拼圖與缺塊對應上，這個參數是用來控制允許的差距，比如默認值為2，表示相差±2個像素也是認為拼圖成功的；
• Vldt_Result：驗證結果，等于 True 時表示驗證碼驗證成功。

接下來我們開始寫邏輯。

三、缺塊控制

缺塊只需要在【載入時】，生成一個在【背景圖】范圍內的隨機位置，并將其【移動】到該位置即可，其中【LVAR2】是背景圖，減去自身的寬高是為了避免缺塊移到背景外面去：

四、拼圖生成

首先是需要根據缺塊的位置生成自身的位置和拼圖預覽圖：

由于我們是水平拖動，所以拼圖的 x 值可以保持不變，y 值跟隨缺塊的 y 值即可；拼圖預覽圖并不復雜，實際上就是移動動態面板中的圖片，使對應區域的圖片顯示出來，不過這需要一點想象力。

假設缺塊在背景圖上的起始位置是（0，0），如果移動到（20，20），則拼圖預覽圖需要移動到（-20，-20），顯示出來的圖片才會剛好跟缺塊遮擋的圖片一樣。

接著再來給拼圖這個【動態面板】添加一個【跟隨水平拖動】的事件即可：

最后是在停止拖動時，進行校驗：

如果拼圖沒有接觸到缺塊，或者兩者之間的距離（通過兩個元件的 x 值的差值來判斷）不在設定的容差內，則將拼圖放回原位，否則的話，表示驗證成功，將變量【Vldt_Result】設置為 True，并顯示驗證成功提示。

五、刷新功能

最后是刷新功能，很簡單，就是觸發缺塊和拼圖的載入事件，重置驗證結果變量值以及隱藏驗證成功的提示即可：

驗證碼系列教程總共4篇，本篇教程是最后一篇，如果本教程對你有幫助，歡迎點擊“收藏”或“喜歡”，其他3篇驗證碼教程歡迎點擊我的主頁查看，感謝閱讀。