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

本文介紹了獲取和校驗驗證碼的原型設(shè)計方法，希望對想學(xué)習(xí)Axure的讀者有所幫助。

一、獲取驗證碼

獲取驗證碼的操作如下圖所示：

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

實現(xiàn)：

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

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

第一步：新增全局變量。

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

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

原型連接可在鏈接https://pan.baidu.com/s/119S-ERhKMbetLrjCH7pSUg下載（密碼t5cw）。

二、校驗驗證碼

輸入驗證碼，并校驗是否正確。實現(xiàn)如下：

1. 在獲取驗證碼的基礎(chǔ)上增加新的元件：文本框（命名為“輸入驗證碼”）和熱區(qū)（命名為“具體提示信息”），并將熱區(qū)樣式初始化為隱藏狀態(tài)。

2. 設(shè)置輸入框用例。主要作用是檢查每次輸入完成之后，驗證碼是否正確。如果正確，則提示信息顯示為“√”，否則顯示為“×”。添加“按鍵松開時”用例，在每次輸入完成后松開按鍵時執(zhí)行該用例。驗證信息包括文字長度和內(nèi)容是否與驗證碼相同等條件判斷。錯誤時進(jìn)行相應(yīng)的提示信息設(shè)置。

最后隱藏提示信息即可。完整的用例信息請參考上述截圖。

F5預(yù)覽效果如下：

如果您想了解更多關(guān)于產(chǎn)品運營方面的干貨知識，請繼續(xù)關(guān)注135編輯器。