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

文/十月大神

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

實(shí)現(xiàn)效果

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

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

3. 校驗(yàn)碼輸入為空時(shí)，點(diǎn)擊“提交驗(yàn)證”，彈出內(nèi)容為“校驗(yàn)碼不能為空！”的提示信息，刷新校驗(yàn)碼；

4. 校驗(yàn)碼輸入錯(cuò)誤時(shí)，點(diǎn)擊“提交驗(yàn)證”，彈出內(nèi)容為“請(qǐng)輸入正確的校驗(yàn)碼！”的提示信息，刷新校驗(yàn)碼，清空文本框內(nèi)容；

5. 校驗(yàn)碼輸入正確時(shí)，點(diǎn)擊“提交驗(yàn)證”，彈出內(nèi)容為“校驗(yàn)碼驗(yàn)證成功！”的提示信息。

原理分析

（1）圖片背景+隨機(jī)校驗(yàn)碼組成圖形校驗(yàn)碼

（2）隨機(jī)校驗(yàn)碼是由 4 個(gè)隨機(jī)的字母或數(shù)字組成

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

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

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

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

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

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

（4）將 1 位隨機(jī)校驗(yàn)碼復(fù)制 3 次，組成 4 個(gè)隨機(jī)校驗(yàn)碼

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

元件準(zhǔn)備

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

2. 校驗(yàn)碼文本標(biāo)簽，用于顯示圖形檢驗(yàn)碼的文字；

3. 校驗(yàn)碼背景圖片，放在圖形校驗(yàn)碼文字底部；

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

5. 輸入框，用于動(dòng)態(tài)輸入校驗(yàn)碼；

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

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

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

9. 錯(cuò)誤提示組合元件，用于顯示校驗(yàn)出錯(cuò)時(shí)的提示；

10. 成功提示組合元件，用于顯示校驗(yàn)成功時(shí)的提示。

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

網(wǎng)頁(yè)題目：網(wǎng)站安全之獲取大小寫字母及數(shù)字圖形校驗(yàn)碼
當(dāng)前鏈接：http://jinyejixie.com/news32/106282.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、全網(wǎng)營(yíng)銷推廣、網(wǎng)站內(nèi)鏈、品牌網(wǎng)站制作、域名注冊(cè)、微信公眾號(hào)

廣告

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