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

其他 2020-04-03 18:31:37 阅读次数: 0

这篇文章主要介绍了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实现不同类型的验证码方式方法，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果对你有用 点赞评论收藏 加关注^_^  

码奴生来只知道前进~
发布了101 篇原创文章 · 获赞 125 · 访问量 4万+
私信 关注

猜你喜欢

转载自blog.csdn.net/tanqingfu1/article/details/105296277
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
NEFU 117 素数个数的位数
Closest Common Ancestors (Lca,tarjan)
ELK部署
【转载】Hive笔记整理（三）
SQL语句（一）基本表的定义
关于Java web开发中的MySQL的事务语句
MFC创建自定义窗体
如何用一句话激怒程序员？
《逆袭大学》文摘——9.4 基础和应用的平衡中找到大学的节奏
【spring源码分析】@Value注解原理
每日归档
更多
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022