jQuery拖拽验证

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

 26275  352  查看评论 (9)
分享到微信朋友圈
X
jQuery拖拽验证 ie兼容6

更新时间:2018/9/4 17:24:54

更新说明:本次更新增加了支持移动端的验证控件

样式1(仅支持PC端)

//初始验证
function SlideCheckFail() {
    $(".outer").removeClass("act");
    $(".inner").css("left", 0);
    $(".inner").html(">>");
    $(".filter-box").css('width', 0);
    $(".outer>span").html("按住滑块,拖拽到最右边");
    $("#CaptchaID").val("0");
    $(".outer span").addClass("txtRoll");
}
//验证成功
function SlideCheckSuccess(dx) {
    $(".outer").addClass("act");
    $(".outer>span").html("验证通过!");
    $(".inner").html('√');
    $(".inner").css("left", dx);
    $(".filter-box").css('width', dx);
    $("#CaptchaID").val("1");
    $(".outer span").removeClass("txtRoll");
}

样式2(支持移动端和PC端)

首先需要初始化"slider"

//初始化
var slider = new SliderUnlock("#slider", {
    successLabelTip: "验证成功"
}, function() {
    //验证成功
    $("#label").html('√');
    $("#label").css('color', 'green');
    $("#labelTip").removeClass("txtRoll");
    $("#CaptchaID2").val("1");
});

初始化验证需要调用slider的两个方法

slider.init();
slider.reset();

ie下不支持文字颜色滚动效果,其它正常

//初始验证
function SlideCheckFail() {
   $(".outer").removeClass("act");
   $(".inner").css("left", 0);
   $(".inner").html(">>");
   $(".filter-box").css('width', 0);
   $(".outer>span").html("按住滑块,拖拽到最右边");

   $("#CaptchaID").val("0");
   $(".outer span").addClass("txtRoll");
}
//验证成功
function SlideCheckSuccess(dx) {
   $(".outer").addClass("act");
   $(".outer>span").html("验证通过!");
   $(".inner").html('√');
   $(".inner").css("left", dx);
   $(".filter-box").css('width', dx);

   $("#CaptchaID").val("1");
   $(".outer span").removeClass("txtRoll");
}
相关插件-验证,拖和放

点击按钮获取验证码倒计时

这是一个基于jQuery的点击按钮获取验证码倒计时插件,这个插件在我们的开发中非常常用
  验证
 49401  399

原生js验证码

原生js验证码彩色点线干扰
  验证
 25943  290

jquery多功能表单验证

基于jquery封装的表单验证插件
  验证
 41742  362

jQuery常用网站表单验证

可用于用户注册,网站留言等,有正在输入提示和失去焦点自动正则验证输入框内容
  验证
 37388  354

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

    Woow 0
    2019/11/20 11:07:51
    ie上背景是黑色吧,渐变失效 回复
    慕名` 0
    2019/4/26 11:51:05
    移动端复原的时候前面会闪一下,电脑端直接还原了 回复
    少司命 0
    2019/4/25 16:49:06
    感觉不错,想看一下原理 回复
    面有反骨 0
    2019/4/1 16:15:02
    你好 pc端一旦拖拽过快就会失败的判定是写哪?有什么改进办法吗?这个比较影响使用体验
        面有反骨0
        2019/4/1 16:15:53
        确切说明下 是支持移动端和PC端那个版本
    回复
    小明 0
    2018/11/12 19:18:29
    AllureZexi 0
    2018/9/3 17:01:35
    移动端无效
        ~枯叶蝶、0
        2018/9/4 16:21:15
        是的,我收藏了一个其他人写的支持移动端的,你可以参考下http://www.jq22.com/yanshi14734
        ~枯叶蝶、0
        2018/9/5 8:49:28
        目前插件已经更新支持移动和PC端。
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复