在驗證方式中，比較簡單的一個是拖動滑塊進行驗證，本文作者分享了滑塊拖動驗證碼的設計教程，一起來看一下吧。

之前作者發過一系列高保真驗證碼的教程，本次帶來的是本系列的第5篇文章，分享滑塊拖動驗證碼的設計教程。

先看一下最終效果：

接下來分享這個驗證碼的設計教程。

一、用到的元件

首先在畫布中拖入兩個動態面板，分別命名為【滑塊】和【滑軌】，每個動態面板中均有兩個狀態：【默認】和【驗證成功】。

以下是兩個動態面板對應的兩個狀態內放置的內容

然后把滑塊放在滑軌上方，跟滑軌左對齊，界面就畫完了。

二、用到的變量

全局變量中添加 Drag_Ver_Result，用來記錄驗證的結果。

三、設計交互

首先給【滑塊】添加【拖動時】交互，拖動時，滑塊跟隨水平拖動，同時以【滑軌】的左右邊界作為【滑塊】移動的邊界，這樣滑塊就可以在滑軌內左右拖動。

接著再給【滑塊】添加【拖動結束時】的交互，也就是拖動滑塊松手之后的交互。這里需要判斷【滑塊】是否已經拖動到【滑軌】的最右側，如果是，表示驗證成功，將兩個動態面板都切換到【驗證成功】的狀態，并將變量 Drag_Ver_Result 設置為 True；如果不是，則將【滑塊】移動【回拖動前位置】。

這樣，這個滑塊拖動的驗證碼就完成了，這是驗證碼系列中做起來最簡單的一個。

其他驗證碼教程回顧：

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

【Axure 教程】驗證碼，除了 12306，我還沒有服過誰（數學運算篇）

【Axure 教程】驗證碼，除了 12306，我還沒有服過誰（文字點選篇）

【Axure 教程】驗證碼，除了 12306，我還沒有服過誰（滑動拼圖篇）