几款实用的jQuery前端验证码插件【原创

来源:https://www.sucaihuo.com/js/3327.html 2017-12-21 21:33浏览(6052) 收藏

分享几款实用的jQuery前端验证码插件,纯前端的验证码verify插件,普通数字文字验证码、拖动滑块滑动验证码、点选文字验证码代码等。
几款实用的jQuery前端验证码插件
分类:表单代码 > 验证码 难易:初级
查看演示 下载资源 下载积分: 30 积分

js代码

<script type="text/javascript" src="js/verify.js" ></script>
<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'],
		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('验证失败!');
		}
		
	});
	
	
</script>
声明:本文为原创文章,如需转载,请注明来源sucaihuo.com并保留原文链接:https://www.sucaihuo.com/js/3327.html
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2