Axure設計:獲取大小寫字母及數字圖形校驗碼

免费SSL证书申请

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

句子/十月的Ogin

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

實現效果

  1. 校驗碼隨機顯示,包含0- 9 的數字,az的小寫字母,AZ的大寫字母;
  2. 點擊“驗證碼區域”或“看不清,換一張”文本時,刷新校驗碼;
  3. 校驗碼輸入為空時,點擊“提交驗證”,彈出內容為“校驗碼不能為空!”的提示信息,刷新校驗碼;
  4. 校驗碼輸入錯誤時,點擊“提交驗證”,彈出內容為“請輸入正確的校驗碼!”的提示信息,刷新校驗碼,清空文本框內容;
  5. 校驗碼輸入正確時,點擊“提交驗證”,彈出內容為“校驗碼驗證成功!”的提示信息。

原理分析

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

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

(3)先實現獲取1 位隨機校驗碼

  • 將大寫AY,小寫ay,數字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. 源數據文本標籤,用於存放大小寫AY字母及0- 9 數字;
  2. 校驗碼文本標籤,用於顯示圖形檢驗碼的文字;
  3. 校驗碼背景圖片,放在圖形校驗碼文字底部;
  4. 刷新元件,用於點擊觸發校驗碼刷新;
  5. 輸入框,用於動態輸入校驗碼;
  6. 輸入框背景,放在輸入框底部;
  7. 提交按鈕,觸發輸入框中文字校驗;
  8. 背景,整個案例的演示背景,可要可不要;
  9. 錯誤提示組合元件,用於顯示校驗出錯時的提示;
  10. 成功提示組合元件,用於顯示校驗成功時的提示。

隱藏源文件、提示元件,重新佈局元件後效果如下:

實現步驟

(1)頁面首次加載時事件

源數據文本標籤載入時,設置校驗碼元件的文字為4 位隨機校驗碼。

赋值校验码元件文字时,需要设置为富文本格式,从而可以设置校验码的 4 位字符显示不同颜色。

利用Math.random()、Math.floor(x)函数获取 0 到 62 之间的整数C(0≤C<62),利用b.charAt(C)函数获取b元件在C位置的字符;依次复制三次,每次设置不同的颜色。

到这里,就已经完成了四位随机校验码的获取功能。

(2)图形校验码点击事件

点击图形校验码时,设置校验码元件的文字为 4 位随机校验码。

实用小技巧:复制源数据元件载入时的设置方法,黏贴至校验码元件单击时,即可完成单击时的文字设置。

(3)“看不清,换一换”点击事件

点击“看不清,换一换”元件时,我们可以采用与图形校验码点击事件相同的方式设置元件文字,但是此处我们用一种新的方式设置元件文字。我们在点击元件时,触发“图形校验码点击事件”,从而设置校验码元件的文字为 4 位随机校验码。

触发“校验码”鼠标单击事件。

(4)校验码提交验证事件

当我们点击“提交验证”按钮时,如果提交的输入表单为空,提示“校验码不能为空!”;如果提交的输入表单内容与图形校验码内容不同时,提示“请输入正确的校验码”,同时重置图形校验码内容;如果提交的输入表单内容与图形校验码内容一致时,则进入下一环节。

实用小技巧:利用显示事件的“灯箱效果”,背景色为黑色,透明度设置为20%,提示效果很漂亮。

赞(0)
未经允许不得转载:Baiduio » Axure設計:獲取大小寫字母及數字圖形校驗碼

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

Baiduio空间更快、更便利、更安全

联系我们立即注册