做淘宝链接的网站/by72777最新域名查询
之前有写过一个在C#后台实现的点击图上上文字实现安全验证的插件，相对于js验证来说更安全，缺点是只能在c#后台实现，最近发现一个纯js实现的安全验证插件，最大好处就是简洁，跨平台。
下面直接把代码贴出来分享给大家：
运行示例：http://img.lwpoor.cn/verify/login.html
这里包含两个验证的控件：1、拖动滑块拼接图片完成验证 2、点击图片上的文字完成验证
verify.js
http://img.lwpoor.cn/verify/verify.js
verify.css
http://img.lwpoor.cn/verify/verify.css
如何使用？
新建一个html页面：
<!DOCTYPE html>
<html style="font-size:10px;">
<head>
<meta charset="UTF-8"><title>纯js实现的一个安全验证插件</title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"><script type="text/javascript" src="https://images.zhongmin.cn/wap/js/jquery-1.9.1.min.js"></script><link rel="stylesheet" href="http://img.lwpoor.cn/verify/verify.css"><style>.body-shade {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.3);z-index: 100;}
</style>
</head><body><input type="button" value="拖动滑块验证" onclick="verify1();" /><input type="button" value="点击图片验证" onclick="verify2();" /><!--遮罩--><div class="body-shade" style="display:none;"></div><div class="verify-alert verify1" style="display:none;width:360px;"><p class="verify-title">拖动滑块完成安全验证</p><i class="icon-close"></i><div id="mpanel4" class="mpanel mpanelslide"></div><p class="slidefail">验证失败，请控制拼图块对齐缺口</p><div class="slidesuccess"><img src="http://images.zhongmin.cn/zhongmin_wap2017/verify/images/slidesuccess.png" alt=""><p style="color: #22ac38">验证通过</p></div></div><div class="verify-alert verify2" style="display: none;width:360px;"><p class="verify-title">请完成安全认证</p><i class="icon-close"></i><div id="mpanel5" class="mpanel mpanelpoints"></div></div>
</body>
<script type="text/javascript" src="http://img.lwpoor.cn/verify/verify.js" ></script>
<script>function verify1() {$('.body-shade').show();$('.verify1').show();}function verify2() {$('.body-shade').show();$('.verify2').show();} var v1 = $('#mpanel4').slideVerify({type : 2, //类型vOffset : 5, //误差量，根据需求自行调整vSpace : 5, //间隔imgName : ['3.png'],imgSize : {width: '100%',height: '200px',},blockSize : {width: '40px',height: '40px',},barSize : {width : '100%',height : '20px',},ready : function() {},success : function() {//alert('验证成功，添加你自己的代码！');//......后续操作},error : function() {//alert('验证失败！');}}); var v2 = $('#mpanel5').pointsVerify({defaultNum : 4, //默认的文字数量checkNum : 3, //校对的文字数量 vSpace : 5, //间隔imgName : ['3.png'],imgSize : {width: '100%',height: '200px',},barSize : {width : '100%',height : '40px',},ready : function() {},success : function(res) {//alert('验证成功，添加你自己的代码！');//......后续操作console.log(res)},error : function(res) {//alert('验证失败！');}}); $('.icon-close').on('click',function () {$('.verify-alert,.mask-layer').hide();$('.body-shade').hide();})
</script>
</html>
运行结果：
1、拖动滑块完成安全验证
2、点击图片上的文字完成验证
关键代码已经写了注释，大家可下载本地运行查看。