這篇文章主要介紹了verify.js實現不同類型的驗證碼(數字字母組合、算法、滑塊、圖片滑塊、點選圖片文字)方式，需要的朋友可以參考下 。
verify.js是一款功能強大的jquery驗證碼插件。verify.js可以實現普通的圖形驗證碼，數字驗證碼，滑動驗證碼和點選驗證碼等多種驗證碼功能。
1、普通驗證碼
就是所有英文字母和數字的組合，可以隨意設置組合的位數
<div class="row">
<div class="col-md-offset-4 col-md-4">
<h3>普通驗證碼</h3>
<div id="mpanel2" ></div>
<button type="button" id="check-btn" class="verify-btn">確定</button>
</div>
</div>
$('#mpanel2').codeVerify({
type : 1,
width : '400px',
height : '50px',
fontSize : '30px',
codeLength : 6,
btnId : 'check-btn',
ready : function() {
},
success : function() {
alert('驗證匹配！');
},
error : function() {
alert('驗證碼不匹配！');
}
});
2、數字計算驗證碼
算法，支持加減乘，不填爲隨機，僅在type=2時生效
$('#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('驗證碼不匹配！');
}
});
3、滑動滑塊到最右側完成驗證
$('#mpanel1').slideVerify({
type : 1, //類型
vOffset : 5, //誤差量，根據需求自行調整
barSize : {
width : '80%',
height : '40px',
},
ready : function() {
},
success : function() {
alert('驗證成功，添加你自己的代碼！');
//......後續操作
},
error : function() {
//alert('驗證失敗！');
}
});
4、拖動方塊到空白處完成驗證(圖片)
$('#mpanel4').slideVerify({
type : 2, //類型
vOffset : 5, //誤差量，根據需求自行調整
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('驗證成功，添加你自己的代碼！');
//......後續操作
},
error : function() {
// alert('驗證失敗！');
}
});
5、點選驗證碼（點擊圖片上的文字 按順序）
$('#mpanel5').pointsVerify({
defaultNum : 4, //默認的文字數量
checkNum : 2, //校對的文字數量
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('驗證成功，添加你自己的代碼！');
//......後續操作
},
error : function() {
// alert('驗證失敗！');
}
});
最好直接上完整代碼文件即開即用；
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
<title>jquery驗證碼插件verify.js</title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
<link rel="stylesheet" type="text/css" href="css/verify.css">
<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
<script type="text/javascript" src="js/verify.js" ></script>
</head>
<body>
<div class="htmleaf-container">
<div class="container">
<div class="row">
<div class="col-md-offset-4 col-md-4">
<h3>普通驗證碼</h3>
<div id="mpanel2" ></div>
<button type="button" id="check-btn" class="verify-btn">確定</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-offset-4 col-md-4">
<h3>數字計算驗證碼</h3>
<div id="mpanel3" style="margin-top: 20px"></div>
<button type="button" id="check-btn2" class="verify-btn">確定</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-offset-4 col-md-4">
<h3>滑動驗證碼</h3>
<p>滑動滑塊到最右側完成驗證</p>
<div id="mpanel1" ></div>
<p style="margin-top:50px;">拖動方塊到空白處完成驗證</p>
<div id="mpanel4" ></div>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-offset-4 col-md-4">
<h3>點選驗證碼</h3>
<div id="mpanel5" style="margin-top:50px;"></div>
<div id="mpanel6" style="margin-top:50px;"></div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$('#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','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('驗證成功，添加你自己的代碼！');
//......後續操作
},
error : function() {
// alert('驗證失敗！');
}
});
$('#mpanel5').pointsVerify({
defaultNum : 4, //默認的文字數量
checkNum : 2, //校對的文字數量
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('驗證成功，添加你自己的代碼！');
//......後續操作
},
error : function() {
// alert('驗證失敗！');
}
});
$('#mpanel6').pointsVerify({
defaultNum : 4, //默認的文字數量
checkNum : 2, //校對的文字數量
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('驗證成功，添加你自己的代碼！');
//......後續操作
},
error : function() {
// alert('驗證失敗！');
}
});
</script>
</body>
</html>
下面是實際的演示效果
提示：如果不需要在驗證之後自動刷新驗證碼之後就可以註釋掉verify.js文件的這個方法 this.setCode();
好了以上寫的verify.js實現不同類型的驗證碼方式方法，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果對你有用 點贊評論收藏 加關注^_^