verify.js 普通验证码、点选验证码、滑动验证码插件-BFW插件库

verify.js 普通验证码、点选验证码、滑动验证码插件
第一步引入bfwone
第二步执行验证码插件
示例如下，可直接在线运行和编辑
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["verify", "verify"], function() {
                $('#mpanel2').codeVerify({
                    type: 1,
                    width: '400px',
                    height: '50px',
                    fontSize: '30px',
                    codeLength: 6,
                    btnId: 'check-btn',
                    ready: function() {},
                    success: function() {
                        alert('验证匹配！');
                    },
                    error: function() {
                        alert('验证码不匹配！');
                    }
                });


                $('#mpanel3').codeVerify({
                    type: 2,
                    figure: 100, //位数，仅在type=2时生效
                    arith: 0, //算法，支持加减乘，不填为随机，仅在type=2时生效
                    width: '200px',
                    height: '50px',
                    fontSize: '30px',
                    btnId: 'check-btn2',
                    ready: function() {},
                    success: function() {
                        alert('验证匹配！');
                    },
                    error: function() {
                        alert('验证码不匹配！');
                    }
                });



                $('#mpanel1').slideVerify({
                    type: 1, //类型
                    vOffset: 5, //误差量，根据需求自行调整
                    barSize: {
                        width: '80%',
                        height: '40px',
                    },
                    ready: function() {},
                    success: function() {
                        alert('验证成功，添加你自己的代码！');
                        //......后续操作
                    },
                    error: function() {
                        //		        	alert('验证失败！');
                    }

                });


                $('#mpanel4').slideVerify({
                    type: 2, //类型
                    vOffset: 5, //误差量，根据需求自行调整
                    vSpace: 5, //间隔
                    imgName: ['http://editor.bfw.wiki/bfwrepo/image/sample1.png', 'http://editor.bfw.wiki/bfwrepo/image/sample2.png'],
                    imgSize: {
                        width: '400px',
                        height: '200px',
                    },
                    blockSize: {
                        width: '40px',
                        height: '40px',
                    },
                    barSize: {
                        width: '400px',
                        height: '40px',
                    },
                    ready: function() {},
                    success: function() {
                        alert('验证成功，添加你自己的代码！');
                        //......后续操作
                    },
                    error: function() {
                        //		        	alert('验证失败！');
                    }

                });



                $('#mpanel5').pointsVerify({
                    defaultNum: 4, //默认的文字数量
                    checkNum: 2, //校对的文字数量
                    vSpace: 5, //间隔
                    imgName: ['http://editor.bfw.wiki/bfwrepo/image/sample1.png', 'http://editor.bfw.wiki/bfwrepo/image/sample2.png'],
                    imgSize: {
                        width: '600px',
                        height: '200px',
                    },
                    barSize: {
                        width: '600px',
                        height: '40px',
                    },
                    ready: function() {},
                    success: function() {
                        alert('验证成功，添加你自己的代码！');
                        //......后续操作
                    },
                    error: function() {
                        //		        	alert('验证失败！');
                    }

                });

                $('#mpanel6').pointsVerify({
                    defaultNum: 4, //默认的文字数量
                    checkNum: 2, //校对的文字数量
                    vSpace: 5, //间隔
                    imgName: ['http://editor.bfw.wiki/bfwrepo/image/sample1.png', 'http://editor.bfw.wiki/bfwrepo/image/sample2.png'],
                    imgSize: {
                        width: '600px',
                        height: '200px',
                    },
                    barSize: {
                        width: '600px',
                        height: '40px',
                    },
                    ready: function() {},
                    success: function() {
                        alert('验证成功，添加你自己的代码！');
                        //......后续操作
                    },
                    error: function() {
                        //		        	alert('验证失败！');
                    }

                });


            });
        });
    </script>
</head>
<body>
    <!-- 代码 开始 -->
    <h1>verify</h1>
    <p>
        纯前端的验证码插件，大熊出品
    </p>
    <h3>普通验证码</h3>
    <div id="mpanel2" style="height:100px;">
    </div>

    <button type="button" id="check-btn" class="verify-btn">确定</button>


    <div id="mpanel3" style="margin-top: 20px;height:100px;">
    </div>

    <button type="button" id="check-btn2" class="verify-btn">确定</button>

    <h3>滑动验证码</h3>
    <div id="mpanel1" style="height:50px;">
    </div>

    <div id="mpanel4" style="margin-top:50px;">
    </div>


    <h3>点选验证码</h3>
    <div id="mpanel5" style="margin-top:50px;">
    </div>

    <div id="mpanel6" style="margin-top:50px;">
    </div>

</body>
</html>