快速开始

简单几步完成集成。注意:分为两大类进行说明的哦,详细一定要看文档手册 ^_^

引入资源

常规验证码需要引入两种资源:JS, CSS。

<!--引入CSS-->
<link rel="stylesheet" type="text/css" href="css/verify.css">

<!--引入JQUERY-->
<script type="text/javascript" src="js/jquery.min.js"></script>

<!--引入JS-->
<script type="text/javascript" src="js/verify.min.js"></script>

Html构建

需要一个显示验证码的容器和一个按钮,按钮根据项目实际情况进行调整。

<div id="mpanel1" >
</div>

<!--确定的按钮,id名称在初始化时使用-->
<button id="check-btn" class="verify-btn">确定</button>

Verify初始化

初始化设置参数。

$('#mpanel1').codeVerify({

    //常规验证码type=1, 运算验证码type=2
    type : 1,
	
    //验证码宽度
    width : '400px',
    
    //验证码高度
    height : '50px',
    
    //......更多参数设置请查阅文档
	
    //提交按钮的id名称
    btnId : 'check-btn',

    //验证成功以后的回调
    success : function() {
    	alert('验证匹配!');
    }
    
});

成功运行

完成上面几步就可成功运行。

引入资源

滑动验证码&拼图验证码&选字验证码需要引入两种资源:JS, CSS,注意要引入下载包中的images、fonts文件夹

<!--引入CSS-->
<link rel="stylesheet" type="text/css" href="css/verify.css">

<!--引入JQUERY-->
<script type="text/javascript" src="js/jquery.min.js"></script>

<!--引入JS-->
<script type="text/javascript" src="js/verify.min.js"></script>

Html构建

需要一个显示验证码的容器。

<div id="mpanel1" >
</div>

Verify初始化

初始化设置参数,滑动验证码&拼图验证码的标志slideVerify,选字验证码的标志pointsVerify。

//这里的初始化是滑动&拼图的标志slideVerify
$('#mpanel1').slideVerify({
    //滑动验证码type=1,拼图验证码type=2
    type : 1,
    
    //拼图验证码或选择验证码图片名称
    imgName : ['1.jpg', '2.jpg'],
    
    //拼图验证码的图片尺寸
    imgSize : {
    	width: '400px',
    	height: '200px',
    },
    
    //......更多参数设置请查阅文档

    //验证成功以后的回调
    success : function() {
    	alert('验证匹配!');
    }
    
});

//选字验证码的标志pointsVerify
//$('#mpanel1').pointsVerify({
	//......更多参数设置请查阅文档
//});

成功运行

完成上面几步就可成功运行。