各大互聯網站因為安全校驗需要，防止站點大量重復請求、機器人暴力訪問等情況，在校驗用戶身份時常采用圖形校驗碼方式。作者將通過這篇案列分享，教大家使用axure制作實現“獲取驗證包含大小寫字母與數字的隨機圖形校驗碼”。

文/十月大神

演示地址：http://www.pmgod.cn/demo/

實現效果

1. 校驗碼隨機顯示，包含0- 9 的數字，a-z的小寫字母，a-z的大寫字母；

2. 點擊“驗證碼區域”或“看不清，換一張”文本時，刷新校驗碼；

3. 校驗碼輸入為空時，點擊“提交驗證”，彈出內容為“校驗碼不能為空！”的提示信息，刷新校驗碼；

4. 校驗碼輸入錯誤時，點擊“提交驗證”，彈出內容為“請輸入正確的校驗碼！”的提示信息，刷新校驗碼，清空文本框內容；

5. 校驗碼輸入正確時，點擊“提交驗證”，彈出內容為“校驗碼驗證成功！”的提示信息。

原理分析

（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）利用元件載入、單擊元件等方式觸發校驗碼動態變化

元件準備

1. 源數據文本標簽，用于存放大小寫a-y字母及0- 9 數字；

2. 校驗碼文本標簽，用于顯示圖形檢驗碼的文字；

3. 校驗碼背景圖片，放在圖形校驗碼文字底部；

4. 刷新元件，用于點擊觸發校驗碼刷新；

5. 輸入框，用于動態輸入校驗碼；

6. 輸入框背景，放在輸入框底部；

7. 提交按鈕，觸發輸入框中文字校驗；

8. 背景，整個案例的演示背景，可要可不要；

9. 錯誤提示組合元件，用于顯示校驗出錯時的提示；

10. 成功提示組合元件，用于顯示校驗成功時的提示。

隱藏源文件、提示元件，重新布局元件后效果如下：

網頁題目：網站安全之獲取大小寫字母及數字圖形校驗碼
當前鏈接：http://www.2m8n56k.cn/news32/106282.html

成都網站建設公司_創新互聯，為您提供App設計、全網營銷推廣、網站內鏈、品牌網站制作、域名注冊、微信公眾號

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：[email protected]。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯