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

一、獲取驗證碼

獲取驗證碼操作，如下：

分析：

• 左圖為矩形，主要展示驗證碼（本例設置4位驗證碼），其中驗證碼為字母和數字組合；

• 右圖為文本輸入框，主要設置點擊事件，即點擊文本文字，矩形框中的驗證碼隨機出現四位值。

實現：

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

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

第一步：新增全局變量。

第二步，設置全局變量值ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789。

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

完成，點擊“確定”。

F5預覽：

原形連接，歡迎下載。

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

二、校驗驗證碼

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

實現：

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

• 文本框，命名：輸入驗證碼；

• 增加熱區(qū)，命名為：具體提示信息，設置值為：正確，錯誤；

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

元件設置完成，如下：

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

驗證信息為：

• 文字長度：if等于4，則正確，否則錯誤

• 文字內容：if 等于驗證碼內容則正確，否則錯誤

錯誤設置，如上。

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

設置完的用例信息如下：

F5預覽：

原形見連接，歡迎下載：

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

本文由 @小甜甜不甜 原創(chuàng)發(fā)布于人人都是產品經理。

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