本文分享了獲取、校驗(yàn)驗(yàn)證碼的原型設(shè)計(jì)方法，希望對(duì)想學(xué)習(xí)Axure的伙伴們有幫助。

一、獲取驗(yàn)證碼

獲取驗(yàn)證碼操作，如下：

分析：

• 左圖為矩形，主要展示驗(yàn)證碼（本例設(shè)置4位驗(yàn)證碼），其中驗(yàn)證碼為字母和數(shù)字組合；
• 右圖為文本輸入框，主要設(shè)置點(diǎn)擊事件，即點(diǎn)擊文本文字，矩形框中的驗(yàn)證碼隨機(jī)出現(xiàn)四位值。

實(shí)現(xiàn)：

1.準(zhǔn)備相關(guān)部件：矩形1，命名為“驗(yàn)證碼”，隨意輸入四個(gè)值，中間用空格隔開；文本標(biāo)簽，命名為“換一張”，字體隨意設(shè)置，如下：

2.選擇文本標(biāo)簽，設(shè)置鼠標(biāo)點(diǎn)擊事件。

第一步：新增全局變量。

第二步，設(shè)置全局變量值A(chǔ)BCDEFGHIJKLMNOPQRSTUVWXYZ0123456789。

第三步，設(shè)置驗(yàn)證碼元件文本值，點(diǎn)擊FX，插入字符串函數(shù)[[全局變量.substr(全局變量.length*Math.random(),1)]]，輸入四次，中間用空格隔開。

完成，點(diǎn)擊“確定”。

F5預(yù)覽：

原形連接，歡迎下載。

鏈接:?https://pan.baidu.com/s/119S-ERhKMbetLrjCH7pSUg 密碼: t5cw

二、校驗(yàn)驗(yàn)證碼

輸入驗(yàn)證碼，并校驗(yàn)驗(yàn)證碼是否正確。

實(shí)現(xiàn)：

1.在獲取驗(yàn)證碼的基礎(chǔ)上，增加新的元件：

• 文本框，命名：輸入驗(yàn)證碼；
• 增加熱區(qū)，命名為：具體提示信息，設(shè)置值為：正確，錯(cuò)誤；

熱區(qū)樣式，初始化為隱藏。

元件設(shè)置完成，如下：

設(shè)置輸入框用例：主要的作用就是為了檢查每次輸入完成之后，驗(yàn)證碼是否正確，如果正確，則提示信息，顯示為“√”，如果錯(cuò)誤，則提示信息顯示為“×”，添加“按鍵松開時(shí)”用例，即，每次輸入完成，松開按鍵時(shí)完成用例。

驗(yàn)證信息為：

• 文字長(zhǎng)度：if等于4，則正確，否則錯(cuò)誤
• 文字內(nèi)容：if 等于驗(yàn)證碼內(nèi)容則正確，否則錯(cuò)誤

錯(cuò)誤設(shè)置，如上。

最后，隱藏提示信息，略。

設(shè)置完的用例信息如下：

F5預(yù)覽：

原形見連接，歡迎下載：

鏈接:?https://pan.baidu.com/s/1XOSLO2lBpDocDaoeaiRlzQ 密碼: 6a8c

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

題圖來自 Pexels ，基于 CC0 協(xié)議