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

文/十月大神

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

實現(xiàn)效果

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

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

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

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

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

原理分析

（1）圖片背景+隨機校驗碼組成圖形校驗碼

（2）隨機校驗碼是由 4 個隨機的字母或數(shù)字組成

（3）先實現(xiàn)獲取 1 位隨機校驗碼

• 將大寫a-y，小寫a-y，數(shù)字0- 9 寫入一個文本標簽中，共計 62 個字符；

• 利用math.random()函數(shù)獲取0- 1 之間的隨機數(shù)a（0≤a＜1）；

• 利用隨機數(shù)a* 62 獲取0- 62 之間的隨機數(shù)b（0≤b＜62）；

• 利用math.floor(b)函數(shù) 獲取b向下取整數(shù)c（0≤c＜62）；

• 利用charat(c)函數(shù) 獲取文本指定位置為c的字符。

（4）將 1 位隨機校驗碼復制 3 次，組成 4 個隨機校驗碼

（5）利用元件載入、單擊元件等方式觸發(fā)校驗碼動態(tài)變化

元件準備

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

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

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

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

5. 輸入框，用于動態(tài)輸入校驗碼；

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

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

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

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

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

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

本文題目：網(wǎng)站安全之獲取大小寫字母及數(shù)字圖形校驗碼
當前網(wǎng)址：http://www.js-pz168.com/news/106282.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設、網(wǎng)站導航、全網(wǎng)營銷推廣、App開發(fā)、網(wǎng)站策劃、品牌網(wǎng)站設計

廣告

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