7
JavaScript实现页面动态验证码
source link: https://blog.csdn.net/dkm123456/article/details/114990229
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
引言：
现在很多在用户登陆或注册的时候为了防止程序攻击，加入了动态验证的技术，一般是让用户输入随即生成的验证码来实现。我自己写了一个没有跟后台交互的，就在前端验证，发出来给大家看看。
实现思路：
- 把数字和字母放到一个数组中，通过随机的方式取得数组下标，总共取4个组成验证码；
- 把验证码渲染出来（一个一个的渲染）；
- 绘制一定数量的干扰线，随机颜色；
- 输入验证码，输入4位以后去验证，正确显示钩，错误显示叉并且刷新验证码。
编写构造函数
文本构造函数
线段构造函数
按长度获取验证码
arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];此时效果：
绘制干扰线
此时效果如下：
加入页面布局
加入输入框事件
加入成功、失败验证
代码下载，无需积分
给个三连吧兄弟们！
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK