jquery实现登录失败提示_浅谈jQuery的verify验证码
verify.js是一款功能強(qiáng)大的jquery驗(yàn)證碼插件。verify.js可以實(shí)現(xiàn)普通的圖形驗(yàn)證碼，數(shù)字驗(yàn)證碼，滑動(dòng)驗(yàn)證碼和點(diǎn)選驗(yàn)證碼等多種驗(yàn)證碼功能。
1、普通驗(yàn)證碼
就是所有英文字母和數(shù)字的組合，可以隨意設(shè)置組合的位數(shù)
普通驗(yàn)證碼
確定
$('#mpanel2').codeVerify({
type : 1,
width : '400px',
height : '50px',
fontSize : '30px',
codeLength : 6,
btnId : 'check-btn',
ready : function() {
},
success : function() {
alert('驗(yàn)證匹配！');
},
error : function() {
alert('驗(yàn)證碼不匹配！');
}
});
2、數(shù)字計(jì)算驗(yàn)證碼
算法，支持加減乘，不填為隨機(jī)，僅在type=2時(shí)生效
$('#mpanel3').codeVerify({
type : 2,
figure : 100, //位數(shù)，僅在type=2時(shí)生效
arith : 0, //算法，支持加減乘，不填為隨機(jī)，僅在type=2時(shí)生效
width : '200px',
height : '50px',
fontSize : '30px',
btnId : 'check-btn2',
ready : function() {
},
success : function() {
alert('驗(yàn)證匹配！');
},
error : function() {
alert('驗(yàn)證碼不匹配！');
}
});
3、滑動(dòng)滑塊到最右側(cè)完成驗(yàn)證
$('#mpanel1').slideVerify({
type : 1, //類型
vOffset : 5, //誤差量，根據(jù)需求自行調(diào)整
barSize : {
width : '80%',
height : '40px',
},
ready : function() {
},
success : function() {
alert('驗(yàn)證成功，添加你自己的代碼！');
//......后續(xù)操作
},
error : function() {
//alert('驗(yàn)證失敗！');
}
});
4、拖動(dòng)方塊到空白處完成驗(yàn)證(圖片)
$('#mpanel4').slideVerify({
type : 2, //類型
vOffset : 5, //誤差量，根據(jù)需求自行調(diào)整
vSpace : 5, //間隔
imgName : ['1.jpg', '2.jpg','3.jpg','4.png','5.jpg'],
imgSize : {
width: '400px',
height: '200px',
},
blockSize : {
width: '40px',
height: '40px',
},
barSize : {
width : '400px',
height : '40px',
},
ready : function() {
},
success : function() {
alert('驗(yàn)證成功，添加你自己的代碼！');
//......后續(xù)操作
},
error : function() {
// alert('驗(yàn)證失敗！');
}
});
5、點(diǎn)選驗(yàn)證碼(點(diǎn)擊圖片上的文字 按順序)
$('#mpanel5').pointsVerify({
defaultNum : 4, //默認(rèn)的文字?jǐn)?shù)量
checkNum : 2, //校對(duì)的文字?jǐn)?shù)量
vSpace : 5, //間隔
imgName : ['1.jpg', '2.jpg','3.jpg','4.png','5.jpg'],
imgSize : {
width: '600px',
height: '200px',
},
barSize : {
width : '600px',
height : '40px',
},
ready : function() {
},
success : function() {
alert('驗(yàn)證成功，添加你自己的代碼！');
//......后續(xù)操作
},
error : function() {
// alert('驗(yàn)證失敗！');
}
});
完整代碼
jquery驗(yàn)證碼插件verify.js
')
普通驗(yàn)證碼
確定
數(shù)字計(jì)算驗(yàn)證碼
確定
滑動(dòng)驗(yàn)證碼
滑動(dòng)滑塊到最右側(cè)完成驗(yàn)證
拖動(dòng)方塊到空白處完成驗(yàn)證
點(diǎn)選驗(yàn)證碼
提示：如果不需要在驗(yàn)證之后自動(dòng)刷新驗(yàn)證碼之后就可以注釋掉verify.js文件的這個(gè)方法 this.setCode();
總結(jié)
以上是生活随笔為你收集整理的jquery实现登录失败提示_浅谈jQuery的verify验证码的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： python股票数据预处理_Python
- 下一篇： c语言 异或_C语言经典例题来袭！5大方