1.快速使用

Gitee官网：gitee.com/anji-plus/c…

参考文档：captcha.anji-plus.com/#/doc

在线预览：captcha.anji-plus.com/
2.示例

index.html
<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
        <title>verify插件demo</title>
		<link rel="stylesheet" type="text/css" href="css/verify.css">
		<style>
			div[id^='mpanel']{
				border: 1px solid #00cec9;
			}
			.box{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
		</style>
		<script>
			(function () {
			  if (!window.Promise) {
				document.writeln('<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.1/es6-promise.min.js"><' + '/' + 'script>');
			  }
			})();
		</script>
		<style>
			.btn{
				border: none;
				outline: none;
				width: 300px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				cursor: pointer;
				background-color: #409EFF;
				color: #fff;
				font-size: 16px;
				letter-spacing: 1em;
			}
		</style>
    </head>
    <body>
		<div class="box">
			<h1>verify---anji</h1>
			<p>前后端联合交互的验证码插件</p>
			
			<br><br>
	
			<h3>滑动嵌入式（slider-embed）</h3>
			<div id="mpanel1" >
			</div>
			<h3>滑动弹出式（slider-popup）</h3>
			<button class="btn" id='btn'>点击我</button>
			<div id="mpanel2" style="margin-top:50px;">
			</div>
			
			<h3>点选嵌入式（point-embed）</h3>
			<div id="mpanel3" style="margin-top:50px;">
			</div>
			<h3>点选弹出式（point-popup）</h3>
			<button class="btn" id='btn2'>点击我</button>
			<div id="mpanel4" style="margin-top:50px;">
			</div>
		</div>
		<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.js" ></script>
		<script src="js/crypto-js.js"></script>
		<script src="js/ase.js"></script>
        <script src="js/verify.js" ></script>
        
        <script>
			// 初始化验证码  嵌入式
        	$('#mpanel1').slideVerify({
				baseUrl:'https://captcha.anji-plus.com/captcha-api',  //服务器请求地址, 默认地址为安吉服务器;
				// baseUrl:'http://localhost:8080/captcha_springmvc_war_exploded',  //local-spring-mvc;
				// baseUrl:'http://localhost:8080',  //local-spring-boot;
				mode:'fixed',
				imgSize : {       //图片的大小对象
		        	width: '400px',
		        	height: '200px',
				},
				barSize:{
					width: '400px',
					height: '40px',
				},
		        ready : function() {  //加载完毕的回调
		    	},
		        success : function(params) { //成功的回调
					// 返回的二次验证参数 合并到验证通过之后的逻辑 参数中回传服务器
					console.log(params,"params");
					alert("验证成功")
		        },
		        error : function() {
					//失败的回调
					alert("验证失败")
		        }
			});
			
			// // 初始化验证码  弹出式
			$('#mpanel2').slideVerify({
				baseUrl:'https://captcha.anji-plus.com/captcha-api',  //服务器请求地址, 默认地址为安吉服务器;
				mode:'pop',     //展示模式
				containerId:'btn',//pop模式 必填 被点击之后出现行为验证码的元素id
				imgSize : {       //图片的大小对象,有默认值{ width: '310px',height: '155px'},可省略
					width: '400px',
					height: '200px',
				},
				barSize:{          //下方滑块的大小对象,有默认值{ width: '310px',height: '50px'},可省略
					width: '400px',
					height: '40px',
				},
				beforeCheck:function(){  //检验参数合法性的函数  mode ="pop"有效
					var flag = true;
					//实现: 参数合法性的判断逻辑, 返回一个boolean值
					return flag
				},
				ready : function() {},  //加载完毕的回调
				success : function(params) { //成功的回调
					// params为返回的二次验证参数 需要在接下来的实现逻辑回传服务器
					// 例如: login($.extend({}, params))  
				},
				error : function() {}        //失败的回调
			});
			
			// 初始化验证码  嵌入式
			$('#mpanel3').pointsVerify({
				baseUrl:'https://captcha.anji-plus.com/captcha-api',  //服务器请求地址, 默认地址为安吉服务器;
				// baseUrl:'http://10.108.12.12:8080',  //服务器请求地址, 默认地址为安吉服务器;
				mode:'fixed',
		    	imgSize : {
		        	width: '500px',
		        	height: '255px',
		        },
		        ready : function() {
		    	},
		        success : function(params) {
					//返回的二次验证参数 合并到验证通过之后的逻辑 参数中回传服务器
		        },
		        error : function() {
		        }
		        
		    });
			// // 初始化验证码  弹出式
		    $('#mpanel4').pointsVerify({
					// baseUrl: 'http://10.108.12.4:8088',
				baseUrl:'https://captcha.anji-plus.com/captcha-api',  //服务器请求地址, 默认地址为安吉服务器;
				containerId:'btn2', // pop模式 必填 被点击之后出现行为验证码的元素id
				mode:'pop',
				imgSize : {       //图片的大小对象
		        	width: '400px',
		        	height: '200px',
				},
		        ready : function() {
		    	},
		        success : function(params) {
					//返回的二次验证参数 合并到验证通过之后的逻辑 参数中回传服务器
		        },
		        error : function() {
		        }
		    });
        </script>
    </body>
 
</html>
效果图
1-captcha动态验证码

1.快速使用

2.示例
