各大互聯網站因為安全校驗需要，防止站點大量重複請求、機器人暴力訪問等情況，在校驗用戶身份時常採用圖形校驗碼方式。作者將通過這篇案列分享，教大家使用Axure製作實現“獲取驗證包含大小寫字母與數字的隨機圖形校驗碼”。
實現效果
- 校驗碼隨機顯示，包含0-9的數字，a-z的小寫字母，A-Z的大寫字母；
- 點擊“驗證碼區域”或“看不清，換一張”文本時，刷新校驗碼；
- 校驗碼輸入為空時，點擊“提交驗證”，彈出內容為“校驗碼不能為空！”的提示信息，刷新校驗碼；
- 校驗碼輸入錯誤時，點擊“提交驗證”，彈出內容為“請輸入正確的校驗碼！”的提示信息，刷新校驗碼，清空文本框內容；
- 校驗碼輸入正確時，點擊“提交驗證”，彈出內容為“校驗碼驗證成功！”的提示信息。
原理分析
（1）圖片背景+隨機校驗碼組成圖形校驗碼
（2）隨機校驗碼是由4個隨機的字母或數字組成
（3）先實現獲取1位隨機校驗碼
- 將大寫A-Y，小寫a-y，數字0-9寫入一個文本標籤中，共計62個字符；
- 利用Math.random函數獲取0-1之間的隨機數A（0≤A＜1）；
- 利用隨機數A*62獲取0-62之間的隨機數B（0≤B＜62）；
- 利用Math.floor(B)函數 獲取B向下取整數C（0≤C＜62）；
- 利用charAt(C)函數 獲取文本指定位置為C的字符。
（4）將1位隨機校驗碼複製3次，組成4個隨機校驗碼
（5）利用元件載入、單擊元件等方式觸發校驗碼動態變化
元件準備
- 源數據文本標籤，用於存放大小寫A-Y字母及0-9數字；
- 校驗碼文本標籤，用於顯示圖形檢驗碼的文字；
- 校驗碼背景圖片，放在圖形校驗碼文字底部；
- 刷新元件，用於點擊觸發校驗碼刷新；
- 輸入框，用於動態輸入校驗碼；
- 輸入框背景，放在輸入框底部；
- 提交按鈕，觸發輸入框中文字校驗；
- 背景，整個案例的演示背景，可要可不要；
- 錯誤提示組合元件，用於顯示校驗出錯時的提示；
- 成功提示組合元件，用於顯示校驗成功時的提示。
隱藏源文件、提示元件，重新佈局元件後效果如下：
實現步驟
（1）頁面首次加載時事件
源數據文本標籤載入時，設置校驗碼元件的文字為4位隨機校驗碼。
賦值校驗碼元件文字時，需要設置為富文本格式，從而可以設置校驗碼的4位字符顯示不同顏色。
利用Math.random、Math.floor(x)函數獲取0到62之間的整數C（0≤C＜62），利用b.charAt(C)函數獲取b元件在C位置的字符；依次複製三次，每次設置不同的顏色。
到這裡，就已經完成了四位隨機校驗碼的獲取功能。
（2）圖形校驗碼點擊事件
點擊圖形校驗碼時，設置校驗碼元件的文字為4位隨機校驗碼。
實用小技巧：複製源數據元件載入時的設置方法，黏貼至校驗碼元件單擊時，即可完成單擊時的文字設置。
（3）“看不清，換一換”點擊事件
點擊“看不清，換一換”元件時，我們可以採用與圖形校驗碼點擊事件相同的方式設置元件文字，但是此處我們用一種新的方式設置元件文字。我們在點擊元件時，觸發“圖形校驗碼點擊事件”，從而設置校驗碼元件的文字為4位隨機校驗碼。
觸發“校驗碼”鼠標單擊事件。
（4）校驗碼提交驗證事件
當我們點擊“提交驗證”按鈕時，如果提交的輸入表單為空，提示“校驗碼不能為空！”；如果提交的輸入表單內容與圖形校驗碼內容不同時，提示“請輸入正確的校驗碼”，同時重置圖形校驗碼內容；如果提交的輸入表單內容與圖形校驗碼內容一致時，則進入下一環節。
實用小技巧：利用顯示事件的“燈箱效果”，背景色為黑色，透明度設置為20%，提示效果很漂亮。
本案例已完成，點擊查看上一篇案例“雙向列表帶計數選擇”。
題圖來自Unsplash，基於CC0協議
閱讀更多 人人都是產品經理 的文章
