我们在做网站或app时都需要用到验证码功能，防止他人的恶意攻击，提高系统的安全性。验证码的种类也很多，不同的功能，不同的应用场景，需要使用不同的验证码。常见的有这么几种:短信验证码、图形验证码、滑动验证码。下面就把我开发中的经验分享一下:
1. 短信验证码
实现逻辑：
a.两个文本框+一个获取验证码按钮，文本框用来输入手机号和获取到的验证码，按钮负责点击和记录倒计时；
b.60秒倒计时需要通过js实现，这里给大家推荐一个好用的插件(http://smsow.zhenzikj.com/doc/sdk.html)，不需要自己在写了
c.后台负责实现验证码的生成、短信发送、验证码的校验，可以通过java、c#、php、python等语言实现
效果图展示：
具体源码可参考博客: https://blog.csdn.net/zuoliangzhu/article/details/89790589
二.图形验证码
概要：一般的图形验证码就像上方的短信验证码一样，就是后台生成的验证码图片返回给前端的，那样的话就比较简单，因为复杂的都让后台解决了，我在这里主要说的是另一种，就是不调用后台接口，通过canvas画布来解决图形验证码。
思路：
a.一个文本框用来输入由数字和字母组合的验证码+一个画布标签来显示图形验证码+一个提交按钮；
b.提交按钮进行表单验证，输入正确或者错误进行相应的提示；
c.用画布生成并渲染出验证码图形，并且得到随机的颜色值；
效果图展示：例3.0基础图片展示
例4.0提交成功效果展示
例5.0提交失败效果展示
代码展示：
HTML
css
js
三.滑动验证码
摘要：博客园登录的时候就用到了这个滑块登录，是完成拼图形式的，我下面这个原理是一样的，逻辑是根据鼠标滑动轨迹，坐标位置，计算拖动速度等等来判断是否人为操作，如果小伙伴想做和博客园效果一样的，那么可以用来做参考。
思路：
a.由三个div组成，构成了滑块和底部进度条的效果；
b.书写js,注册鼠标按下，悬浮，松开事件；
c.记录滑块移动的距离和状态进行判断是否成功；
效果图展示：
例6.0：滑动验证码初始状态例7.0：滑动状态例8.0：成功状态
代码展示：
html
请拖动滑块解锁>>
css
js
转载: