各大網際網路站因為安全校驗需要，防止站點大量重複請求、機器人暴力訪問等情況，在校驗用戶身份時常採用圖形校驗碼方式。作者將通過這篇案列分享，教大家使用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）「看不清，換一換」點擊事件