特效描述:利用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('验证失败!');
}
});
如果觉得《html5验证码插件 利用jQuery实现网页验证码插件》对你有帮助,请点赞、收藏,并留下你的观点哦!