今天和大家聊聊如何利用Axure實(shí)現(xiàn)圖片驗(yàn)證碼的隨機(jī)切換，并且驗(yàn)證對(duì)錯(cuò)！

首先來(lái)分析下需要實(shí)現(xiàn)的效果：

1. 圖片中的驗(yàn)證碼為數(shù)字和字母的隨機(jī)組合；
2. 點(diǎn)擊更換驗(yàn)證碼實(shí)現(xiàn)驗(yàn)證碼的更換，驗(yàn)證碼隨機(jī)出現(xiàn)4位字母或數(shù)字；
3. 驗(yàn)證碼輸入時(shí)，點(diǎn)擊提交按鈕，若驗(yàn)證碼錯(cuò)誤進(jìn)行錯(cuò)誤提示。

1. 準(zhǔn)備

• 文本框（用來(lái)輸入驗(yàn)證碼）；
• 矩形框（用來(lái)顯示生成的二維碼）；
• 動(dòng)態(tài)面板（提示驗(yàn)證碼輸入結(jié)果對(duì)錯(cuò)與空），設(shè)置三個(gè)動(dòng)態(tài)面板提示狀態(tài)，默認(rèn)為隱藏；
• 提交按鈕；
• 文本標(biāo)簽（看不清？換一張?。?/li>

以上元件自行命名，在做交互效果時(shí)候方便自己操作即可，這里命名為。

隨機(jī)驗(yàn)證碼是顯示在一個(gè)矩形框內(nèi)，這里只需要從26個(gè)大寫(xiě)英文字母和10個(gè)數(shù)字中隨機(jī)獲取一位字符，四個(gè)字符拼成一個(gè)隨機(jī)驗(yàn)證碼，且允許有重復(fù)字母出現(xiàn)。

2. 開(kāi)始

①文本框先輸入四個(gè)字符，作為起始默認(rèn)驗(yàn)證碼！如下圖所示！

②點(diǎn)擊【換一張】→ 新建交互 → 單擊時(shí) → 設(shè)置變量值 → 全局變量

將變量值設(shè)置為abcdefghij……xyz0123456789（26個(gè)英文字母+10個(gè)數(shù)字），意思是驗(yàn)證碼的值將會(huì)在以上字符中產(chǎn)生。

③繼續(xù)上面的交互狀態(tài)，單擊時(shí) → 設(shè)置文本 → 選擇“驗(yàn)證碼”，值為[[OnLoadVariable.substr(OnLoadVariable.length*Math.random(),1)]]，將以上代碼連續(xù)輸入四遍，中間不需要加符號(hào)。

這一步的意思是點(diǎn)擊【換一張】，隨機(jī)選中四個(gè)字符設(shè)置為驗(yàn)證碼的值顯示在驗(yàn)證碼框中。

④這一步我們開(kāi)始進(jìn)行驗(yàn)證碼提交驗(yàn)證。

點(diǎn)擊【提交】→ 新建交互 → 單擊時(shí)

設(shè)置情形一：如果輸入框文字 == 驗(yàn)證碼文字

設(shè)置面板狀態(tài)到提示正確面板狀態(tài)，且設(shè)置面板狀態(tài)為可見(jiàn)。

設(shè)置情形二：如果輸入框文字 ！= 驗(yàn)證碼文字

設(shè)置面板狀態(tài)到提示錯(cuò)誤面板狀態(tài)，且設(shè)置面板狀態(tài)為可見(jiàn)。

⑤點(diǎn)擊預(yù)覽，這樣我們一個(gè)圖形驗(yàn)證碼就做好啦~

本文由 @胡同學(xué) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議