上一篇文章給大家分享瞭如何製作web端的註冊和登錄，沒有看過的小夥伴“點擊這裡”。今天給大家帶來了的是升級版本，如何製作“驗證碼”。
為什麼會出現“驗證碼”這種反人性的操作？
當我們製作產品的時候，除了正常的使用流程之外，還會遇到一些特殊情況，最常見的就是一些網絡攻擊，“惡意刷短信、暴力破解登錄密碼、增加網站負載的嘗試”等等等等。這時候除了技術大大們提供的技術保證，我們從產品端提供的常規的防範措施就是使用“驗證碼”來增加訪問的路徑。
廢話不多說，先看演示gif：
（1）普通的圖片驗證碼
登錄：
註冊：
（2）流行的滑塊驗證碼
登錄：
註冊：
製作中的難點
（1）普通驗證碼
這裡需要3個變量：
- “yzmPublic”變量：是用來存儲原始數值。（數字10個+小寫英文字母26個+大寫英文字母26個）
- “yzmBox”變量：用來存儲，本次生成的驗證碼數值。（用來和輸入的驗證碼進行對比）
- “btnTypeOn”變量：是用來記錄，驗證碼對比是否正確的。（這個變量並不是必需品）
如何讓驗證碼中輸入的英文，不區分大小寫。使用系統自帶的函數toLowerCase，這個函數的作用是把字符串轉換成小寫。
有了上面這三個變量，實現起來就是重複幾個步驟而已。
（2）滑塊驗證碼
這個和第一個驗證碼比起來元素要多一些，首先我們確定運行邏輯和要用到的元素。
- 打開滑塊驗證碼的時候需要先檢測；
- 檢測完畢後，才顯示滑塊驗證碼；
- 用戶拖動滑塊到正確的位置後，顯示驗證成功的狀態；
- 滑塊驗證碼需要設置基礎的六個元素模塊：滑動圖片、背景圖、滑動圖片落地區域、錯誤提示、滑塊區域、滑塊。
滑塊如何限制滑動區域是一個比較困難的地方。
這裡需要用到界限，設置“水平移動”，然後添加左側和右側的“邊界”，另外需要用到局部變量，我們要用到一個固定元素“滑塊區域”的座標，使用他的位置來為滑塊做定位。
因為做這兩個驗證碼的時候，判斷都使用了“btnTypeOn”這個變量。所以更換這兩種驗證碼，只需要替換激活動作和元素就可以。
歡迎朋友們拍磚，多多指出其中的不足。
原型鏈接：
- 註冊和登錄鏈接：https://tk5yg4.axshare.com
- 普通驗證碼鏈接：https://k4x9cz.axshare.com
- 滑塊驗證碼鏈接：https://61uzxz.axshare.com
分享到:
閱讀更多 人人都是產品經理 的文章
