本文介绍了一款基于jQuery的网页验证码插件，包括普通、滑动及点选等多种类型的验证码实现方式。通过简单的配置即可应用于网页中，提高网站的安全性和用户体验。
特效描述：利用jQuery实现 网页验证码插件。利用jQuery实现网页验证码插件
代码结构
1. 引入CSS
2. 引入JS
3. HTML代码
verify
纯前端的验证码插件，大熊出品
普通验证码
确定
确定
滑动验证码
点选验证码
$('#mpanel2').codeVerify({
type : 1,
width : '400px',
height : '50px',
fontSize : '30px',
codeLength : 6,
btnId : 'check-btn',
ready : function() {
},
success : function() {
alert('验证匹配！');
},
error : function() {
alert('验证码不匹配！');
}
});
$('#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('验证码不匹配！');
}
});
$('#mpanel1').slideVerify({
type : 1,//类型
vOffset : 5,//误差量，根据需求自行调整
barSize : {
width : '80%',
height : '40px',
},
ready : function() {
},
success : function() {
alert('验证成功，添加你自己的代码！');
//......后续操作
},
error : function() {
// alert('验证失败！');
}
});
$('#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('验证失败！');
}
});
$('#mpanel5').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('验证失败！');
}
});
$('#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('验证失败！');
}
});
扫一扫
432
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
