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

本文介紹了獲取和校驗(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è)值，中間用空格隔開(kāi)；文本標(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)]]，輸入四次，中間用空格隔開(kāi)。完成后點(diǎn)擊“確定”。

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

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

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

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

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

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

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

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