1. 文件下载:http://down.htmleaf.com/1711/201711061539.zip
2.login.html 登陆页面代码:
页面引入样式
<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="__PUBLIC__/verify/css/htmleaf-demo.css"> <link rel="stylesheet" type="text/css" href="__PUBLIC__/verify/css/verify.css">
验证码展示代码
<center> <div class="row" style="margin-top:200px"> <div class="col-md-offset-4 col-md-4"> <div id="mpanel5" style="margin-top:50px;"></div> <div id="mpanel6" style="margin-top:50px;"></div> </div> </div> </center>
js等引入
<script type="text/javascript" src="__STATIC__/lib/jquery/1.9.1/jquery.min.js"></script><script>window.jQuery || document.write('<script src="__PUBLIC__/verify/js/jquery-1.11.0.min.js"><\/script>')</script> <script type="text/javascript" src="__PUBLIC__verify/js/verify.js" ></script>
js 代码
<script type="text/javascript"> $('#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() { $("#loginform").show(); //验证成功后的逻辑代码 }, error : function() { // alert('验证失败!'); } }); </script>
3.效果图 验证之前
4.验证通过之后
或 隐藏掉
代码插件来源:http://down.htmleaf.com/1711/201711061539.zip