各大互聯(lián)網(wǎng)站因為安全校驗需要，防止站點大量重復(fù)請求、機器人暴力訪問等情況，在校驗用戶身份時常采用圖形校驗碼方式。作者將通過這篇案列分享，教大家使用axure制作實現(xiàn)“獲取驗證包含大小寫字母與數(shù)字的隨機圖形校驗碼”。
文/十月大神
演示地址：http://www.pmgod.cn/demo/
實現(xiàn)效果
校驗碼隨機顯示，包含0- 9 的數(shù)字，a-z的小寫字母，a-z的大寫字母；
點擊“驗證碼區(qū)域”或“看不清，換一張”文本時，刷新校驗碼；
校驗碼輸入為空時，點擊“提交驗證”，彈出內(nèi)容為“校驗碼不能為空！”的提示信息，刷新校驗碼；
校驗碼輸入錯誤時，點擊“提交驗證”，彈出內(nèi)容為“請輸入正確的校驗碼！”的提示信息，刷新校驗碼，清空文本框內(nèi)容；
校驗碼輸入正確時，點擊“提交驗證”，彈出內(nèi)容為“校驗碼驗證成功！”的提示信息。
原理分析（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 位隨機校驗碼復(fù)制 3 次，組成 4 個隨機校驗碼
（5）利用元件載入、單擊元件等方式觸發(fā)校驗碼動態(tài)變化
元件準備
源數(shù)據(jù)文本標簽，用于存放大小寫a-y字母及0- 9 數(shù)字；
校驗碼文本標簽，用于顯示圖形檢驗碼的文字；
校驗碼背景圖片，放在圖形校驗碼文字底部；
刷新元件，用于點擊觸發(fā)校驗碼刷新；
輸入框，用于動態(tài)輸入校驗碼；
輸入框背景，放在輸入框底部；
提交按鈕，觸發(fā)輸入框中文字校驗；
背景，整個案例的演示背景，可要可不要；
錯誤提示組合元件，用于顯示校驗出錯時的提示；
成功提示組合元件，用于顯示校驗成功時的提示。
隱藏源文件、提示元件，重新布局元件后效果如下：


對于一個網(wǎng)站小白來說，從何處入手去優(yōu)化
重慶企業(yè)網(wǎng)站建設(shè)相關(guān)注意事項
做網(wǎng)站沒有達到預(yù)期效果是什么問題
淄博信息發(fā)布通過百度指數(shù)闡明網(wǎng)站用戶需求打破seo優(yōu)化瓶頸
有哪些營銷推廣方式來解決網(wǎng)站不收錄的問題？
租用境外云服務(wù)器部署網(wǎng)站好嗎?
新手的網(wǎng)站如何制作更合適
建網(wǎng)站四大注意事項，建網(wǎng)站必備