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

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

一、獲取驗證碼

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

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

實現：

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

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

第一步：新增全局變量。

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

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

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

二、校驗驗證碼

輸入驗證碼，并校驗是否正確。實現如下：

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

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

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

F5預覽效果如下：

如果您想了解更多關于產品運營方面的干貨知識，請繼續關注135編輯器。