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

一、獲取驗證碼

獲取驗證碼操作，如下：

分析：

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

實現(xiàn)：

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

2.選擇文本標簽，設(shè)置鼠標點擊事件。

第一步：新增全局變量。

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

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

完成，點擊“確定”。

F5預(yù)覽：

原形連接，歡迎下載。

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

二、校驗驗證碼

輸入驗證碼，并校驗驗證碼是否正確。

實現(xiàn)：

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

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

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

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

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

驗證信息為：

• 文字長度：if等于4，則正確，否則錯誤
• 文字內(nèi)容：if 等于驗證碼內(nèi)容則正確，否則錯誤

錯誤設(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é)議