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

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

實現(xiàn)效果

1. 校驗碼隨機(jī)顯示，包含0-9的數(shù)字，a-z的小寫字母，A-Z的大寫字母；
2. 點擊“驗證碼區(qū)域”或“看不清，換一張”文本時，刷新校驗碼；
3. 校驗碼輸入為空時，點擊“提交驗證”，彈出內(nèi)容為“校驗碼不能為空！”的提示信息，刷新校驗碼；
4. 校驗碼輸入錯誤時，點擊“提交驗證”，彈出內(nèi)容為“請輸入正確的校驗碼！”的提示信息，刷新校驗碼，清空文本框內(nèi)容；
5. 校驗碼輸入正確時，點擊“提交驗證”，彈出內(nèi)容為“校驗碼驗證成功！”的提示信息。

原理分析

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

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

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

1. 將大寫A-Y，小寫a-y，數(shù)字0-9寫入一個文本標(biāo)簽中，共計62個字符；
2. 利用Math.random()函數(shù)獲取0-1之間的隨機(jī)數(shù)A（0≤A＜1）；
3. 利用隨機(jī)數(shù)A*62獲取0-62之間的隨機(jī)數(shù)B（0≤B＜62）；
4. 利用Math.floor(B)函數(shù) 獲取B向下取整數(shù)C（0≤C＜62）；
5. 利用charAt(C)函數(shù) 獲取文本指定位置為C的字符。

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

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

元件準(zhǔn)備

1. 源數(shù)據(jù)文本標(biāo)簽，用于存放大小寫A-Y字母及0-9數(shù)字；
2. 校驗碼文本標(biāo)簽，用于顯示圖形檢驗碼的文字；
3. 校驗碼背景圖片，放在圖形校驗碼文字底部；
4. 刷新元件，用于點擊觸發(fā)校驗碼刷新；
5. 輸入框，用于動態(tài)輸入校驗碼；
6. 輸入框背景，放在輸入框底部；
7. 提交按鈕，觸發(fā)輸入框中文字校驗；
8. 背景，整個案例的演示背景，可要可不要；
9. 錯誤提示組合元件，用于顯示校驗出錯時的提示；
10. 成功提示組合元件，用于顯示校驗成功時的提示。

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

實現(xiàn)步驟

（1）頁面首次加載時事件

源數(shù)據(jù)文本標(biāo)簽載入時，設(shè)置校驗碼元件的文字為4位隨機(jī)校驗碼。

賦值校驗碼元件文字時，需要設(shè)置為富文本格式，從而可以設(shè)置校驗碼的4位字符顯示不同顏色。

利用Math.random()、Math.floor(x)函數(shù)獲取0到62之間的整數(shù)C（0≤C＜62），利用b.charAt(C)函數(shù)獲取b元件在C位置的字符；依次復(fù)制三次，每次設(shè)置不同的顏色。

到這里，就已經(jīng)完成了四位隨機(jī)校驗碼的獲取功能。

（2）圖形校驗碼點擊事件

點擊圖形校驗碼時，設(shè)置校驗碼元件的文字為4位隨機(jī)校驗碼。

實用小技巧：復(fù)制源數(shù)據(jù)元件載入時的設(shè)置方法，黏貼至校驗碼元件單擊時，即可完成單擊時的文字設(shè)置。

（3）“看不清，換一換”點擊事件

點擊“看不清，換一換”元件時，我們可以采用與圖形校驗碼點擊事件相同的方式設(shè)置元件文字，但是此處我們用一種新的方式設(shè)置元件文字。我們在點擊元件時，觸發(fā)“圖形校驗碼點擊事件”，從而設(shè)置校驗碼元件的文字為4位隨機(jī)校驗碼。

觸發(fā)“校驗碼”鼠標(biāo)單擊事件。

（4）校驗碼提交驗證事件

當(dāng)我們點擊“提交驗證”按鈕時，如果提交的輸入表單為空，提示“校驗碼不能為空！”；如果提交的輸入表單內(nèi)容與圖形校驗碼內(nèi)容不同時，提示“請輸入正確的校驗碼”，同時重置圖形校驗碼內(nèi)容；如果提交的輸入表單內(nèi)容與圖形校驗碼內(nèi)容一致時，則進(jìn)入下一環(huán)節(jié)。

實用小技巧：利用顯示事件的“燈箱效果”，背景色為黑色，透明度設(shè)置為20%，提示效果很漂亮。

本案例已完成，點擊查看上一篇案例“雙向列表帶計數(shù)選擇”。

本文由 @?十月大神 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議