Axure8.0實例:簡單實用的驗證碼

27 評論 34133 瀏覽 52 收藏 6 分鐘

分享一個運用Axure8.0制作驗證碼的實例。

相信大家都遇到過,在登錄某網站時,往往會要求輸入一個驗證碼,驗證碼一般是4或5位的純數字或數字字符結合體,這里就給大家介紹一下我做的一個驗證碼的小例子。

預覽

驗證碼

一、元件準備

1、文本輸入框一個。用于輸入驗證碼的,起名為“輸入框”;

2、矩形框一個。用于顯示隨機驗證碼,起名“驗證碼”;

3、文字標簽一個。用于手動重置驗證碼,起名“換一張”;

4、動態面板一個。有兩個狀態,一個是輸入的驗證碼正確,一個是錯誤,且默認隱藏,起名“提示信息”;

1

5、全局變量兩個。OnLoadVariable默認值為:

0123456789abcdefghijklmnopqrstuvwxyz,yzm默認值為空;

2

二、添加用例

1、頁面用例。在進入頁面時,首先要有個驗證碼的,所以給頁面添加“頁面載入時”用例,目的是在進入頁面時就能動態生成一個驗證碼(例子中的驗證碼為4位,各位看官可以自行設計);

3

①首先通過隨機獲取“OnLoadVariable”變量中的一位字符,然后將獲取的字符賦值給“yzm”變量。獲取“OnLoadVariable”變量的一位字符通過數學函數Math.random()和字符串函數substr()聯合使用得到的。這里要注意一下,因為“OnLoadVariable”變量的初始值是“0~z”共36位,所以我們要截取“OnLoadVariable”的一位字符就必須是下標為“0~35”的整數,所以使用數學函數Math.floor()向下取整,這樣剛剛好能取到“0~35”之間的所有整數。有一點需要注意的是:每一次賦值給“yzm”變量的時候,都是在原來的基礎上增加了新截取的一位字符,所以需要把“yzm”原來的值加上新獲取的字符一起賦給“yzm”。

4

②將“yzm”變量的值賦給“驗證碼”矩形框為文字內容。為了讓驗證碼顯示的逼真一些,這里把“驗證碼”矩形框的字體設置成個性一點的字體和顏色,所以我選擇了富文本,其實在工具欄中設置也是一樣的。

5

③添加一個觸發事件到頁面。Axure8.0中增加了觸發事件的動作,個人覺得非常贊,放在這里使用,感覺有些像開發語言中的循環語句了。這里會通過這個觸發事件再次執行頁面的“頁面載入時”,達到每次獲取一個字符的效果。

6

2、輸入框用例。用于判斷輸入驗證碼是否正確,添加“按鍵松開時”用例,通過“輸入框”文字長度和文字內容是否等于“驗證碼”矩形框文字內容判定。

7

①如果“輸入框”文字長度等于4且文字內容等于“驗證碼”矩形框的文字內容,那么久認為驗證碼輸入的對的,我們就給出正確的提示,顯示“提示信息”動態面板中“對”的狀態。

②如果“輸入框”文字長度等于4,但文字內容不等于“驗證碼”矩形框的文字內容,那么就給出錯誤的提示,顯示“提示信息”動態面板中“錯”的狀態。

③其他情況就直接隱藏掉“提示信息”動態面板,并給出任何提示。

3、換一張用例。更換驗證碼的作用,實現起來相當的容易,首先把“驗證碼”、“輸入框”和“yzm”的值都清空,并且隱藏掉“提示信息”動態面板,然后直接“觸發事件”到頁面的“頁面載入時”即可,這樣就直接執行頁面的“頁面載入時”用例,新的驗證碼就出現了;

三、預覽

好了,開始按你的F5鍵吧!

 

本文由 @ 無淚 原創發布于人人都是產品經理。未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 大神果然厲害,一看就知道怎么做了

    來自湖北 回復
  2. 還有就是提示信息顯示的事,我的怎么無論輸入什么都沒有反應

    來自山東 回復
  3. 第三步的換一張怎么設置啊,看不懂,能否來個源文件或者是我加個群也行

    來自山東 回復
  4. dalao好,我按照方法做的,但是預覽的時候驗證碼就顯示的是整串函數,也檢查了很多次了,但是還是不知道問題在哪里,求解,順便求一源文件867184808@qq.com,謝謝??

    來自云南 回復
  5. 大神你還,在帖子里好多看不懂的,第一步里的第三小步添加fire事件怎么添加,找不到相關按鈕,還要第二步里的設置提醒信息怎么設置,在用例編輯頁面也找不到,最后求發案例,1013616341@qq.com

    來自浙江 回復
    1. 如果是用RP8的話,在用例編輯左側框最下方“其他”中,點擊“觸發事件”就可以了。

      來自四川 回復
  6. 大神,能給我發下原型文件嗎?郵箱:863751377@qq.com 非常感謝

    來自江蘇 回復
  7. 一步一步做下來,實現了,感謝!

    來自浙江 回復
  8. 大神,請原型原件,我的郵箱:1013253091@qq.com ??

    來自廣東 回復
  9. 大牛,我這邊按照你的來做,驗證碼始終只顯示一位,不知道啥原因,能發個 源文件給我嗎

    來自新疆 回復
  10. 1916910632@qq.com我的郵箱,麻煩發一份,謝謝大神 ??

    來自陜西 回復
  11. 大神,所有效果加完之后,預覽的時候一直出現的是提示信息里的錯誤,啥情況尼 ??

    來自陜西 回復
  12. 同樣來晚了,沒有看到QQ群的群號。只好麻煩也發一份到郵箱438290331@qq.com,謝謝!

    來自湖北 回復
  13. 哈哈,來晚了,如果有朋友看到小弟的留言,麻煩也發一份給我,謝謝。1205988419@qq.com

    來自廣東 回復
  14. 點擊驗證碼更改不起作用,可以發一下源文件么?謝謝 644853024@qq.com

    來自湖北 回復
  15. 點擊驗證碼不起作用,輸入校驗碼輸入是對的也顯示錯誤圖片,能發一下源文件,學習一下嗎?我的郵箱:fangjiang@yundasys.com

    來自上海 回復
  16. 親,有源文件嗎?今早按照您的步驟做了,但是驗證碼那邊有問題,我的是全部驗證碼都出現了,一屏幕都是驗證碼。我先看看您的源文件,一起探討學習。
    我的郵箱:taro_luo@163.com
    麻煩親了。

    來自河北 回復
  17. 能把文件發給我嗎?我總是出現錯誤
    809559418@qq.com

    來自浙江 回復
  18. 把文件發給我可以么 我驗證碼可以刷新,但是不出現提示信息,524718386@qq.com 謝謝

    來自遼寧 回復
  19. 能把文件發給我嗎?我總是出現錯誤
    610454627@qq.com

    來自廣東 回復
  20. 忍不住自己試試,先去查查函數怎么用的233333

    來自安徽 回復
  21. 簡單實用,哈哈。

    來自廣東 回復
  22. 數字里面應該是有0的吧,還有應該取得數值是1到36位的吧。

    回復
    1. 字符串的下標是0開始的

      來自浙江 回復
  23. 有下載文件嗎

    來自湖北 回復
    1. 按照你的方法做了 但是有很多問題。381807480@qq.com

      來自湖北 回復
    2. 嗯,謝謝啦

      來自湖北 回復