jQuery精简滑动验证

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

 21437  243  查看评论 (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);
    })
})
相关插件-拖和放,验证

可拖拽图片文本框(类似QQ发送消息框)

支持拖拽图片,并且将图片转换为base64,兼容IE8以上所有浏览器
  拖和放
 23821  229

jQuery移动端手势滑动切换(原创)

仿探探应用首页,原生图片切换(个人原创)移动端
  拖和放
 23325  248

jQuery图片DIV指定范围内拖动加调整大小

实现在指定大小DIV内拖动图片,以及调整图片大小
  拖和放
 34946  313

微信左划删除效果

微信左划出现删除按钮
  拖和放
 30680  343

讨论这个项目(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经常写错,我今天修改提交一下
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复