各大互聯網站因為安全校驗需要，防止站點大量重復請求、機器人暴力訪問等情況，在校驗用戶身份時常采用圖形校驗碼方式。作者將通過這篇案列分享，教大家使用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%，提示效果很漂亮。

本案例已完成，點擊QQ群“532261671”獲取源文件；

點擊查看上一篇案例“雙向列表帶計數選擇”；

更多案例請點擊http://www.pmgod.cn?查看。