文章目录
- 写在前面
- 涉及知识点
- 1、随机字母验证码
- 1.1 效果
- 1.2 实现源码
- 2、数字运算验证码
- 2.1 效果
- 2.2 实现源码
- 3、滑块验证码
- 3.1 效果
- 3.2 实现源码
- 4、图片补全验证码
- 4.1 效果
- 4.2 实现源码
- 5、顺序点选验证码
- 5.1 效果
- 5.2 实现源码
- 6、源码分享
- 6.1 百度网盘
- 6.2 123网盘
- 6.3 邮箱留言
- 总结
写在前面
写文章之前我总有一个习惯去说明一下我的创作背景，其实也是怕后面年纪大了记性不好，这次是我偶然翻到上次做的安全漏洞修复项目，里面就有一个登录校验的要求，防止一些机器模拟登录，这不需要添加一个随机码的填入校验，这次我就基于前端角度去看市面上常见的5种验证码组件。
涉及知识点
多种前端登录验证码实现源码，常见登录验证校验实现demo，如何实现数字运算验证码，随机字母验证码，拖动滑块验证码的实现方法，按顺序点击文字验证码的实现方法，如何实现拖动缺块到正确位置的验证码，多种前端验证码的实现方式，5种常见的前端验证码实现demo。
版权声明：此文原创于CSDN博主-《拄杖盲学轻声码》，主页有很多分享的代码，期待您的访问。
【切记】其实以下5种web验证码主要的实现方式还是通过引入verify.js组件，基于jquery来实现的，完整源码在第六章节可以自行下载。
1、随机字母验证码
这个是我们最初最常见的验证码了，通过生成随机的数字或者英文字母，或者两者混合，然后可以点击随机生成，最终输入匹配则校验通过。
1.1 效果
1.2 实现源码
html源码
<div class="validatePart">
<h3>随机数字字符验证码</h3>
<div id="mpanel2">
</div>
<button type="button" id="check-btn" class="verify-btn">确定</button>
</div>
Js源码
$('#mpanel2').codeVerify({
type: 1,
width: '200px',
height: '50px',
fontSize: '30px',
codeLength: 6,
btnId: 'check-btn',
ready: function () {
},
success: function () {
alert('验证匹配！');
},
error: function () {
alert('验证码不匹配！');
}
});
2、数字运算验证码
其实这个在先前软考查询成绩的官网上就最常见了，当时为了查询软考成绩，复习了不少小学数学运算呢。
2.1 效果
2.2 实现源码
html源码
<div class="validatePart">
<h3>数字运算验证码</h3>
<div id="mpanel3" style="margin-top: 20px">
</div>
<button type="button" id="check-btn2" class="verify-btn">确定</button>
</div>
Js源码
$('#mpanel3').codeVerify({
type: 2,
figure: 100, //位数，仅在type=2时生效
arith: 0, //算法，支持加减乘，不填为随机，仅在type=2时生效
width: '200px',
height: '50px',
fontSize: '30px',
btnId: 'check-btn2',
ready: function () {
},
success: function () {
alert('验证匹配！');
},
error: function () {
alert('验证码不匹配！');
}
});
版权声明：此文原创于CSDN博主-《拄杖盲学轻声码》，主页有很多分享的代码，期待您的访问。
3、滑块验证码
滑块其实也是后面的人机校验常见的，一开始都是死的，被很多爬虫算法给识别模拟了，因此拖动校验的方式也应运而生。
3.1 效果
3.2 实现源码
html源码
<div class="validatePart">
<h3>滑块拖动验证码</h3>
<div id="mpanel1">
</div>
</div>
Js源码
$('#mpanel1').slideVerify({
type: 1, //类型
vOffset: 5, //误差量，根据需求自行调整
barSize: {
width: '80%',
height: '40px',
},
ready: function () {
},
success: function () {
alert('验证成功，添加你自己的代码！');
//......后续操作
},
error: function () {
// alert('验证失败！');
}
});
4、图片补全验证码
这个和第三个是有点类似的，但是要求更高，要拖动到准确位置才能通过校验，也是目前市面上用的最多的一种安全验证的方式。
4.1 效果
4.2 实现源码
html源码
<div class="validatePart">
<h3>图片补全验证码</h3>
<div id="mpanel4" style="margin-top:0px;">
</div>
</div>
Js源码
$('#mpanel4').slideVerify({
type: 2, //类型
vOffset: 5, //误差量，根据需求自行调整
vSpace: 5, //间隔
imgName: ['1.jpg', '2.jpg'],
imgSize: {
width: '400px',
height: '200px',
},
blockSize: {
width: '40px',
height: '40px',
},
barSize: {
width: '400px',
height: '40px',
},
ready: function () {
},
success: function () {
alert('验证成功，添加你自己的代码！');
//......后续操作
},
error: function () {
// alert('验证失败！');
}
});
5、顺序点选验证码
最早时候应该是火车购票系统，当时被很多人吐槽了的，就是找出什么锅碗瓢盆的点击验证，这个目前换了一种方式，就是按照给出的文字去几个备选的里面找出来，不然就不能通过验证，相对来说更需要有文字（图像）识别能力
5.1 效果
5.2 实现源码
html源码
<div class="validatePart">
<h3>按顺序点选验证码</h3>
<div id="mpanel6" style="margin-top:10px;">
</div>
</div>
Js源码
$('#mpanel6').pointsVerify({
defaultNum: 4, //默认的文字数量
checkNum: 2, //校对的文字数量
vSpace: 5, //间隔
imgName: ['1.jpg', '2.jpg'],
imgSize: {
width: '600px',
height: '200px',
},
barSize: {
width: '600px',
height: '40px',
},
ready: function () {
},
success: function () {
alert('验证成功，添加你自己的代码！');
//......后续操作
},
error: function () {
// alert('验证失败！');
}
});
我主要是把我看到的常见一些登录验证场景给大家做了一个罗列与展示，希望能够让大家从中学到一些web登录验证相关的知识，当然如果大家有更多的前端验证码场景可以留言哈，一起互相学习互相进步！
6、源码分享
6.1 百度网盘
链接：https://pan.baidu.com/s/1W2tzFkQN99vkjzfZf4K67w
提取码：hdd6
6.2 123网盘
链接：https://www.123pan.com/s/ZxkUVv-AaI4.html
提取码：hdd6
6.3 邮箱留言
评论区留下您的邮箱账号，博主看到第一时间发给您，祝您生活愉快！
总结
以上就是今天要讲的内容，本文主要介绍了多种前端登录验证码实现源码，常见登录验证校验实现demo，如何实现数字运算验证码，随机字母验证码，拖动滑块验证码的实现方法，按顺序点击文字验证码的实现方法，如何实现拖动缺块到正确位置的验证码，多种前端验证码的实现方式，5种常见的前端验证码实现demo，也期待大家一起进步哈，2023年一起加油！！！
版权声明：此文原创于CSDN博主-《拄杖盲学轻声码》，主页有很多分享的代码，期待您的访问。
