起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標(biāo)識Axure教程 | web端的驗證碼（普通驗證碼和滑塊驗證碼）如何制作？
上一篇文章給大家分享了如何制作web端的注冊和登錄，沒有看過的小伙伴“點擊這里”。今天給大家?guī)砹说氖巧壈姹?，如何制作“驗證碼”。
為什么會出現(xiàn)“驗證碼”這種反人性的操作？
當(dāng)我們制作產(chǎn)品的時候，除了正常的使用流程之外，還會遇到一些特殊情況，最常見的就是一些網(wǎng)絡(luò)攻擊，“惡意刷短信、暴力破解登錄密碼、增加網(wǎng)站負(fù)載的嘗試”等等等等。這時候除了技術(shù)大大們提供的技術(shù)保證，我們從產(chǎn)品端提供的常規(guī)的防范措施就是使用“驗證碼”來增加訪問的路徑。
廢話不多說，先看演示gif：
（1）普通的圖片驗證碼
登錄：
注冊：
（2）流行的滑塊驗證碼
登錄：
注冊：
制作中的難點
（1）普通驗證碼
這里需要3個變量：
- “yzmPublic”變量：是用來存儲原始數(shù)值。（數(shù)字10個+小寫英文字母26個+大寫英文字母26個）
- “yzmBox”變量：用來存儲，本次生成的驗證碼數(shù)值。（用來和輸入的驗證碼進(jìn)行對比）
- “btnTypeOn”變量：是用來記錄，驗證碼對比是否正確的。（這個變量并不是必需品）
如何讓驗證碼中輸入的英文，不區(qū)分大小寫。使用系統(tǒng)自帶的函數(shù)toLowerCase，這個函數(shù)的作用是把字符串轉(zhuǎn)換成小寫。
有了上面這三個變量，實現(xiàn)起來就是重復(fù)幾個步驟而已。
（2）滑塊驗證碼
這個和第一個驗證碼比起來元素要多一些，首先我們確定運行邏輯和要用到的元素。
- 打開滑塊驗證碼的時候需要先檢測；
- 檢測完畢后，才顯示滑塊驗證碼；
- 用戶拖動滑塊到正確的位置后，顯示驗證成功的狀態(tài)；
- 滑塊驗證碼需要設(shè)置基礎(chǔ)的六個元素模塊：滑動圖片、背景圖、滑動圖片落地區(qū)域、錯誤提示、滑塊區(qū)域、滑塊。
滑塊如何限制滑動區(qū)域是一個比較困難的地方。
這里需要用到界限，設(shè)置“水平移動”，然后添加左側(cè)和右側(cè)的“邊界”，另外需要用到局部變量，我們要用到一個固定元素“滑塊區(qū)域”的坐標(biāo)，使用他的位置來為滑塊做定位。
因為做這兩個驗證碼的時候，判斷都使用了“btnTypeOn”這個變量。所以更換這兩種驗證碼，只需要替換激活動作和元素就可以。
歡迎朋友們拍磚，多多指出其中的不足。
原型鏈接：
- 注冊和登錄鏈接：https://tk5yg4.axshare.com
- 普通驗證碼鏈接：https://k4x9cz.axshare.com
- 滑塊驗證碼鏈接：https://61uzxz.axshare.com
相關(guān)閱讀
本文由 @jiantian 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自Unsplash，基于CC0協(xié)議
很詳細(xì) 受教了
一起進(jìn)步 ?