jQuery精简滑动验证

所属分类： JQ特效输入验证

查看演示立即下载

插件描述：用作简单的滑块验证，自己写主要是因为想要重置的方法；其它很多都没有重置的方法，迫不得已，简单封装个

更新时间：2019-08-30 00:02:30

更新说明：优化了验证方法，原验证方法有些许问题

更新时间：2019/2/11 上午9:11:09

更新说明：修改了个 bug getSuccessState 单词写错已修改。

更新时间：2019/1/9 下午7:16:39

更新说明：修改了个bug

插件使用方法

实例1

<div class="verify-wrap" id="verify-wrap">
</div>
<div style="text-align: center;">
    <button type="button" id="resetBtn" style="display: inline-block;">重置1</button>
    <button type="button" id="getState" style="display: inline-block;">获取1验证状态</button>
</div>

实例2

<div class="selfDiv" style="width: 600px;margin: 0 auto;">
    <div class="verify-wrap" id="verify-wrap2">
    </div>
</div>
<div style="text-align: center;">
    <button type="button" id="resetBtn2" style="display: inline-block;">重置2</button>
    <button type="button" id="getState2" style="display: inline-block;">获取2验证状态</button>
</div>

var SlideVerifyPlug = window.slideVerifyPlug;
var slideVerify = new SlideVerifyPlug('#verify-wrap', {
    wrapWidth: '450', //设置 容器的宽度 ,不设置的话，会设置成100%，需要自己在外层包层div,设置宽度，这是为了适应方便点；         
    initText: '请按住滑块，123', //设置  初始的 显示文字          
    sucessText: '验证通过最右边最右边最右边', //设置 验证通过 显示的文字          
    getSuccessState: function(res) {
        //当验证完成的时候 会 返回 res 值 true，只留了这个应该够用了               
        console.log(res);
    }
});
$("#resetBtn").on('click', function() {
    slideVerify.resetVerify(); //可以重置 插件 回到初始状态 
})
$("#getState").on('click', function() {
    alert(slideVerify.slideFinishState); //这个可以拿到 当前验证状态  是否完成})
    var slideVerify2 = new SlideVerifyPlug('#verify-wrap2', {
        initText: '请按住滑块',
        sucessText: '验证通过',
    });
    $("#resetBtn2").on('click', function() {
        slideVerify2.resetVerify();
    }) $("#getState2").on('click', function() {
        alert(slideVerify2.slideFinishState);
    })
})

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： jQuery多图片上传
下一个特效：飞机大战(一共有四个模式)