纯js实现的前端验证插件

之前有写过一个在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、拖动滑块完成安全验证

纯js实现的前端验证插件

2、点击图片上的文字完成验证

纯js实现的前端验证插件

关键代码已经写了注释，大家可下载本地运行查看。

纯js实现的前端验证插件

运行示例：http://img.lwpoor.cn/verify/login.html

verify.js

verify.css

相关推荐