UI | 输入 | 媒体 | 导航 | 其他 | 网页模板| APP模板| 常用代码| 在线代码

jQuery精简滑动验证

所属分类：输入-拖和放,验证

 29502  308  查看评论 (28)
分享到微信朋友圈
X
jQuery精简滑动验证 ie兼容8
 查看演示  立即下载

更新时间：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>

js

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);
    })
})
相关插件-拖和放,验证
查看更多

拖动排序插件

 实现在两个div中，互相自由的拖动，并且排序
  拖和放
 51338  484

图标拖拽效果，兼容所有浏览器

 原生JS实现图标图片拖拽，封装好了，可以直接拿去使用
  拖和放
 38568  374

jQuery拖动图片排列插件

 本插件是基于dragst.js，拖拽排列图片的顺序，使用方法简单，兼容各大浏览器
  拖和放
 26256  316

jQuery拖拽拖放插件DAD

 DAD 是一款基于 jQuery 的拖拽拖放插件，它支持常见的水平拖放、垂直拖放、多行拖放、指定拖放区域、回调函数、允许禁止拖放等等，同时你也可以稍加改造，做成类似垃圾篓、购物车等效果。
  拖和放
 79453  651

讨论这个项目（28）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    出嫁? 0
    2020/8/31 15:52:45
    在getSuccessState方法中判断 手机号号码状态失败的时候,使用slideVerify.resetVerify(); 就会失败
        出嫁?0
        2020/8/31 16:09:59
        https://lvyou.niujiaolong.cn/uploads/20200629/11111.png.这是我的问题图片链接
        出嫁?0
        2020/8/31 16:12:13
        https://lvyou.niujiaolong.cn/uploads/20200629/22222.png
    回复
    fightingyouth 0
    2020/7/18 12:55:43
    为什么我使用在线的jquery就可以访问 使用本地的js加载就不可以使用呢
        西瓜0
        2020/7/18 13:29:35
        检查本地路径，jQuery版本，当前使用的的是1.10.2
    回复
    伴随着编程世界长大。 0
    2019/11/10 13:09:23
    重置后背景还是绿色的，只有拖动的按钮回去了 回复
    伴随着编程世界长大。 0
    2019/11/10 11:09:39
    都没有css样式
        西瓜0
        2019/11/10 13:03:17
        CSS样式写在js中，自己可扩展。
    回复
    余笙う 0
    2019/10/8 20:31:04
    下载下来没有css样式吗，老哥 回复
    FSY 0
    2019/10/8 19:58:21
    滑动到最右后，同时显示成功状态和初始化状态，两边都有按钮，中间文字也是重叠的，这是bug？不支持移动端吗？ 回复
    Apollo 0
    2019/6/25 9:52:02

    不设置宽度的时候的bug：拖到底之后动画会重置，bug问题出处已找到解决：（希望免费插件越来越好啦）

    //判断当前 按钮 离左侧的距离
getDragBtnLeft:function(){ 
    return parseFloat(this.slideBtn.css('left'));
 },
    回复
    乔一 0
    2019/4/4 14:50:44
    是不是我把上面这些代码都copy到我的项目中？ 回复
    LOVE 0
    2019/4/1 17:49:21
    怎么不设置宽度，外面的div宽度写100%,滑动一点点就显示成功 回复
    执念！执念！ 0
    2019/2/2 20:49:38
    getSuccessState事件不执行，不知道什么原因
        执念！执念！0
        2019/2/2 20:59:29
        额知道原因了，不是getSuccessState，而是getSucessState...
        Casey[??S??V??I??P??8]0
        2019/2/11 9:16:02
        不好意思，success经常写错，我今天修改提交一下
    回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复