今天和大家聊聊如何利用Axure實現圖片驗證碼的隨機切換，並且驗證對錯！
首先來分析下需要實現的效果：
- 圖片中的驗證碼為數字和字母的隨機組合；
- 點擊更換驗證碼實現驗證碼的更換，驗證碼隨機出現4位字母或數字；
- 驗證碼輸入時，點擊提交按鈕，若驗證碼錯誤進行錯誤提示。
1. 準備
- 文本框（用來輸入驗證碼）；
- 矩形框（用來顯示生成的二維碼）；
- 動態面板（提示驗證碼輸入結果對錯與空），設置三個動態面板提示狀態，默認為隱藏；
- 提交按鈕；
- 文本標籤（看不清？換一張！）。
以上元件自行命名，在做交互效果時候方便自己操作即可，這裡命名為。
隨機驗證碼是顯示在一個矩形框內，這裡只需要從26個大寫英文字母和10個數字中隨機獲取一位字符，四個字符拼成一個隨機驗證碼，且允許有重複字母出現。
2. 開始
①文本框先輸入四個字符，作為起始默認驗證碼！如下圖所示！
②點擊【換一張】→ 新建交互 → 單擊時 → 設置變量值 → 全局變量
將變量值設置為abcdefghij……xyz0123456789（26個英文字母+10個數字），意思是驗證碼的值將會在以上字符中產生。
③繼續上面的交互狀態，單擊時 → 設置文本 → 選擇“驗證碼”，值為[[OnLoadVariable.substr(OnLoadVariable.length*Math.random(),1)]]，將以上代碼連續輸入四遍，中間不需要加符號。
這一步的意思是點擊【換一張】，隨機選中四個字符設置為驗證碼的值顯示在驗證碼框中。
④這一步我們開始進行驗證碼提交驗證。
點擊【提交】→ 新建交互 → 單擊時
設置情形一：如果輸入框文字 == 驗證碼文字
設置面板狀態到提示正確面板狀態，且設置面板狀態為可見。
設置情形二：如果輸入框文字 ！= 驗證碼文字
設置面板狀態到提示錯誤面板狀態，且設置面板狀態為可見。
⑤點擊預覽，這樣我們一個圖形驗證碼就做好啦~
題圖來自Unsplash，基於CC0協議
分享到:
閱讀更多 人人都是產品經理 的文章
