jQuery 基于verify实现验证码 "全家桶" 一次让你吃饱

这篇文章主要介绍了verify.js实现不同类型的验证码(数字字母组合、算法、滑块、图片滑块、点选图片文字)方式，需要的朋友可以参考下 。

 verify.js是一款功能强大的jquery验证码插件。verify.js可以实现普通的图形验证码，数字验证码，滑动验证码和点选验证码等多种验证码功能。

1、普通验证码

  就是所有英文字母和数字的组合，可以随意设置组合的位数

	

		
普通验证码
		

		确定
	

$('#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('验证失败！');
			}
			
		});

 

最好直接上完整代码文件即开即用；

	
	 
	
	
	
	
	
	
	
	


	

		

			

				

					
普通验证码
					

					确定
				
			
			

			

				

					
数字计算验证码
					

					确定
				
			
			

			

				

					
滑动验证码
					
滑动滑块到最右侧完成验证
					

					
拖动方块到空白处完成验证
					

				
			
			

			

				

					
点选验证码
					

					

				
			
			
		
	
	
	

下面是实际的演示效果

提示：如果不需要在验证之后自动刷新验证码之后就可以注释掉verify.js文件的这个方法   this.setCode(); 

好了以上写的verify.js实现不同类型的验证码方式方法，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果对你有用 点赞评论收藏 加关注^_^