Article directory
written in front
Before writing articles, I always have a habit of explaining my creative background. In fact, I am afraid that I will not remember well when I get older. This time, I accidentally turned to the security vulnerability repair project I did last time. There is a login verification in it. To prevent some machines from simulating login, this does not need to add a random code to fill in the verification. This time I will look at the five common verification code components on the market from the perspective of the front end.
Knowledge points involved
A variety of front-end login verification code implementation source code, common login verification verification implementation demo, how to implement digital operation verification code, random letter verification code, drag slider verification code implementation method, click text verification code implementation method in order, how to Realize the verification code that drags the missing block to the correct position, a variety of front-end verification code implementation methods, and 5 common front-end verification code implementation demos.
版权声明：此文原创于CSDN博主-《拄杖盲学轻声码》，主页有很多分享的代码，期待您的访问。
[Remember] In fact, the following five web verification codes are mainly realized by introducing the verify.js component and based on jquery. The complete source code can be downloaded by yourself in Chapter 6.
1. Random letter verification code
This is our most common verification code at the beginning. By generating random numbers or English letters, or a mixture of the two, you can click to generate randomly, and the final input match will pass the verification.
1.1 Effect
1.2 Realize the source code
html source code
<div class="validatePart">
<h3>随机数字字符验证码</h3>
<div id="mpanel2">
</div>
<button type="button" id="check-btn" class="verify-btn">确定</button>
</div>
Js source code
$('#mpanel2').codeVerify({
type: 1,
width: '200px',
height: '50px',
fontSize: '30px',
codeLength: 6,
btnId: 'check-btn',
ready: function () {
},
success: function () {
alert('验证匹配！');
},
error: function () {
alert('验证码不匹配！');
}
});
2. Digital operation verification code
In fact, this is the most common on the official website for querying the results of the previous soft test. At that time, in order to check the results of the soft test, I reviewed a lot of elementary school math operations.
2.1 Effect
2.2 Realize the source code
html source code
<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 source code
$('#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. Slider verification code
In fact, the slider is also common in the human-computer verification later. It was dead at the beginning, and it was recognized and simulated by many crawler algorithms, so the method of dragging and verifying came into being.
3.1 Effect
3.2 Realize the source code
html source code
<div class="validatePart">
<h3>滑块拖动验证码</h3>
<div id="mpanel1">
</div>
</div>
Js source code
$('#mpanel1').slideVerify({
type: 1, //类型
vOffset: 5, //误差量，根据需求自行调整
barSize: {
width: '80%',
height: '40px',
},
ready: function () {
},
success: function () {
alert('验证成功，添加你自己的代码！');
//......后续操作
},
error: function () {
// alert('验证失败！');
}
});
4. Image completion verification code
This is somewhat similar to the third one, but it is more demanding. It must be dragged to an accurate position to pass the verification. It is also the most widely used security verification method on the market.
4.1 Effect
4.2 Realize the source code
html source code
<div class="validatePart">
<h3>图片补全验证码</h3>
<div id="mpanel4" style="margin-top:0px;">
</div>
</div>
Js source code
$('#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. Click the verification code in order
At the earliest time, it should be the train ticketing system. At that time, it was complained by many people. It was to find out what kind of pots and pans to click and verify. This is now a different way, which is to go to several alternatives according to the given text. Find out, otherwise it will not pass the verification, relatively speaking, it needs to have text (image) recognition ability
5.1 Effect
5.2 Realize the source code
html source code
<div class="validatePart">
<h3>按顺序点选验证码</h3>
<div id="mpanel6" style="margin-top:10px;">
</div>
</div>
Js source code
$('#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('验证失败！');
}
});
I mainly list and show you some common login verification scenarios I have seen, hoping to let you learn some knowledge about web login verification. Of course, if you have more front-end verification code scenarios, you can leave a message Ha, learn from each other and make progress together!
6. Source code sharing
6.1 Baidu Netdisk
Link: https://pan.baidu.com/s/1W2tzFkQN99vkjzfZf4K67w
Extraction code: hdd6
6.2 123 network disk
Link: https://www.123pan.com/s/ZxkUVv-AaI4.html
Extraction code: hdd6
6.3 Email message
Leave your email account in the comment area, and the blogger will send it to you as soon as he sees it. I wish you a happy life!
Summarize
The above is what I want to talk about today. This article mainly introduces the implementation source code of various front-end login verification codes, demos of common login verification verification implementations, how to implement digital operation verification codes, random letter verification codes, and drag slider verification codes. , click on the text verification code implementation method in order, how to realize the verification code that drags the missing block to the correct position, multiple front-end verification code implementation methods, 5 common front-end verification code implementation demos, and I look forward to everyone's progress together. Let's work together in 2023! ! !
版权声明：此文原创于CSDN博主-《拄杖盲学轻声码》，主页有很多分享的代码，期待您的访问。