由于手機號碼的驗證的廣泛應用，驗證碼在原型制作中幾乎都會使用到，比如在登錄、更改密碼等模塊中。本文跟大家一起來看看，關于驗證碼的制作。

第一步，準備相應部件

拖下三個矩形，制作三個驗證碼，轉(zhuǎn)化為一個動態(tài)面板。一個文本框，用于輸入驗證碼，一個文本標簽。一個對號和一個錯號，制作對于驗證碼的判斷。

文本標簽輸入文字“換一張”，以通過它來實現(xiàn)我們后面更新驗證碼功能。驗證碼的矩形轉(zhuǎn)化而成的動態(tài)面板可命名為“驗證碼”以便我們識別它。按常規(guī)習慣而已，對號填充為綠色，錯號為紅色。

第二步，設置隱藏

將判斷的動態(tài)面板設置為隱藏。在完成驗證碼的輸入之后，再將輸入的內(nèi)容和顯示的驗證碼進行對比，相同則顯示對號，不同則顯示錯號。

?

第三步，設置驗證碼更新。

當我們單擊“換一張”時會刷新驗證碼。我們利用動態(tài)面板設置了3個狀態(tài)，分別制作了3個驗證碼。所以在單擊“換一張”時，需要切換“驗證碼”這個動態(tài)面板的狀態(tài)。

?

由于驗證碼有3個，這個我們需要判斷驗證碼的動態(tài)面板處于哪一個狀態(tài)，也就是說當前驗證碼是哪一個。所以，我們可以用全局變量將當前驗證碼記錄下來。全局變量的默認值設置為ajiw。

?

在單擊“換一張”的時候，判斷當前狀態(tài)。設置驗證碼的切換和記錄。

當狀態(tài)為狀態(tài)1時，點擊“換一張”，狀態(tài)切換為狀態(tài)2，全局變量設置為狀態(tài)2中的驗證碼。依次類推，進行設置。

?

第四步，設置驗證碼判斷

這是最后一步，也是這個叫交互最重要最關鍵的一步。這一步設置的條件判斷有以下幾個：

1、輸入的驗證碼的字符長度是否為驗證碼的字符長度。

2、驗證碼輸入的字符是否與驗證碼顯示的字符一致。

這個交互的判斷邏輯就是當文本框的字符長度為驗證碼的字符長度也就是輸入4位字符的時候，開始校驗輸入的驗證碼是否正確。如果輸入的字符與驗證碼的字符相同的話，顯示對勾的符號，錯誤的話就顯示錯誤的符號。如果字符長度不為4時則不進行校驗，則判斷不顯示任何結果。

具體設置看下文。

為了做出即時判斷，我們把用例設置在文本改變時事件。第一步是設置條件當文本框的字符長度為4，并且判斷，輸入的內(nèi)容是否等于當前驗證碼。

同時滿足上述條件的話，判斷結果顯示對號。只要有條件不滿足，判斷結果顯示錯號。

完成就可以來預覽看看，是不是達到我們想要的效果。

?

這個驗證碼的設置方法是其中的一種設置方法。平時在設置的時候，根據(jù)你自己的實際需要去做不同的設置，做改動。如果你的實際需要跟本文的交互效果有出入，不知道如何設置的話，歡迎來跟我們交流探討。