之前有寫過一個在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、點擊圖片上的文字完成驗證
關鍵代碼已經寫了註釋，大家可下載本地運行查看。