手机电脑兼容的滑块验证 js

最新推荐文章于 2022-02-01 09:27:04 发布

steve_SJF

最新推荐文章于 2022-02-01 09:27:04 发布

阅读量1.9k

点赞数

分类专栏： SJF - JS 文章标签： jQuery滑动验证手机版滑动验证兼容PC版安全校验

本文链接：https://blog.csdn.net/steve_sjf/article/details/84140434

版权

SJF - JS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

最近登录页面短信验证被盗刷，增加滑块验证。

<!DOCTYPE html>
<html lang="en">
<head>
<title>兼容PC端和移动端的jQuery拖动滑块验证</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
html, body, h1 {
margin: 0;
padding: 0;
}
body {
background-color: #151515;
color: #d5d4ff;
overflow: hidden;
}
#demo {
padding: 10px;
border: 0px dashed #d5d4ff;
border-radius: 10px;
text-align: left;
}
</style>
<link rel="stylesheet" href="css/slide-unlock.css">
</head>
<body>
<div id="demo">
<div id="slider">
<div id="slider_bg"></div>
<span id="label">>></span> <span id="labelTip">拖动滑块验证</span>
</div>
<script type="text/javascript" src="https://www.obido.cn/shop/skin/frontend/default/theme286k/js/jquery-1.10.2.min.js"></script>

</div>
</body>
</html>

js文件 jquery.slideunlock.js

/**
 * jquery plugin -- jquery.slideunlock.js
 * Description: a slideunlock plugin based on jQuery
 * Version: 1.1
 * Author: Dong Yuhao
 * created: March 27, 2016
 */

(function ($,window,document,undefined) {
    function SliderUnlock(elm, options, success){
        var me = this;
        var $elm = me.checkElm(elm) ? $(elm) : $;
        success = me.checkFn(success) ? success : function(){};

        var opts = {
            successLabelTip:  "Successfully Verified",
            duration:  200,
            swipestart:  false,
            min:  0,
            max:  $elm.width(),
            index:  0,
            IsOk:  false,
            lableIndex:  0
        };

        opts = $.extend(opts, options||{});

        //$elm
        me.elm = $elm;
        //opts
        me.opts = opts;
        //是否开始滑动
        me.swipestart = opts.swipestart;
        //最小值
        me.min = opts.min;
        //最大值
        me.max = opts.max;
        //当前滑动条所处的位置
        me.index = opts.index;
        //是否滑动成功
        me.isOk = opts.isOk;
        //滑块宽度
        me.labelWidth = me.elm.find('#label').width();
        //滑块背景
        me.sliderBg = me.elm.find('#slider_bg');
        //鼠标在滑动按钮的位置
        me.lableIndex = opts.lableIndex;
        //success
        me.success = success;
    }

    SliderUnlock.prototype.init = function () {
        var me = this;

        me.updateView();
        me.elm.find("#label").on("mousedown", function (event) {
            var e = event || window.event;
            me.lableIndex = e.clientX - this.offsetLeft;
            me.handerIn();
        }).on("mousemove", function (event) {
            me.handerMove(event);
        }).on("mouseup", function (event) {
            me.handerOut();
        }).on("mouseout", function (event) {
            me.handerOut();
        }).on("touchstart", function (event) {
            var e = event || window.event;
            me.lableIndex = e.originalEvent.touches[0].pageX - this.offsetLeft;
            me.handerIn();
        }).on("touchmove", function (event) {
            me.handerMove(event, "mobile");
        }).on("touchend", function (event) {
            me.handerOut();
        });
    };

    /**
     * 鼠标/手指接触滑动按钮
     */
    SliderUnlock.prototype.handerIn = function () {
        var me = this;
        me.swipestart = true;
        me.min = 0;
        me.max = me.elm.width();
    };

    /**
     * 鼠标/手指移出
     */
    SliderUnlock.prototype.handerOut = function () {
        var me = this;
        //停止
        me.swipestart = false;
        //me.move();
        if (me.index < me.max) {
            me.reset();
        }
    };

    /**
     * 鼠标/手指移动
     * @param event
     * @param type
     */
    SliderUnlock.prototype.handerMove = function (event, type) {
        var me = this;
        if (me.swipestart) {
            event.preventDefault();
            event = event || window.event;
            if (type == "mobile") {
                me.index = event.originalEvent.touches[0].pageX - me.lableIndex;
            } else {
                me.index = event.clientX - me.lableIndex;
            }
            me.move();
        }
    };

    /**
     * 鼠标/手指移动过程
     */
    SliderUnlock.prototype.move = function () {
        var me = this;
        if ((me.index + me.labelWidth) >= me.max) {
            me.index = me.max - me.labelWidth;
            //停止
            me.swipestart = false;
            //解锁
            me.isOk = true;
        }
        if (me.index < 0) {
            me.index = me.min;
            //未解锁
            me.isOk = false;
        }
        if (me.index+me.labelWidth+2 == me.max && me.max > 0 && me.isOk) {
            //解锁默认操作
            $('#label').unbind().next('#labelTip').
            text(me.opts.successLabelTip).css({'color': '#fff'});

            me.success();
        }
        me.updateView();
    };


    /**
     * 更新视图
     */
    SliderUnlock.prototype.updateView = function () {
        var me = this;

        me.sliderBg.css('width', me.index);
        me.elm.find("#label").css("left", me.index + "px")
    };

    /**
     * 重置slide的起点
     */
    SliderUnlock.prototype.reset = function () {
        var me = this;

        me.index = 0;
        me.sliderBg .animate({'width':0},me.opts.duration);
        me.elm.find("#label").animate({left: me.index}, me.opts.duration)
            .next("#lableTip").animate({opacity: 1}, me.opts.duration);
        me.updateView();
    };

    /**
     * 检测元素是否存在
     * @param elm
     * @returns {boolean}
     */
    SliderUnlock.prototype.checkElm = function (elm) {
        if($(elm).length > 0){
            return true;
        }else{
            throw "this element does not exist.";
        }
    };

    /**
     * 检测传入参数是否是function
     * @param fn
     * @returns {boolean}
     */
    SliderUnlock.prototype.checkFn = function (fn) {
        if(typeof fn === "function"){
            return true;
        }else{
            throw "the param is not a function.";
        }
    };

    window['SliderUnlock'] = SliderUnlock;
})(jQuery, window, document);

css文件 slide-unlock.css

#slider {
  margin: 100px auto;
  width: 300px;
  height: 40px;
  position: relative;
  border-radius: 20px;
  background-color: #dae2d0;
  overflow: hidden;
  text-align: center;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}

#slider_bg {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background-color: #7AC23C;
  z-index: 1;
}

#label {
  width: 46px;
  position: absolute;
  left: 0;
  top: 0;
  height: 40px;
  line-height: 38px;
  background: #fff;
  z-index: 3;
  cursor: move;
  color: #ff9e77;
  font-size: 16px;
  font-weight: 900;
}

#labelTip {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 13px;
  font-family: 'Microsoft Yahei', serif;
  color: #787878;
  line-height: 40px;
  text-align: center;
  z-index: 2;
}

给自己的，页面内部修改到适应后台的jQuery

jQuery(function () {
    var slider = new SliderUnlock("#slider",{
        successLabelTip : "<?php echo ltext('Finish validation phone') ?>"
    },function(){
        var phone = jQuery(".formorder-login-form input.phone").val();
        if(jQuery("#countryno").val()=='852')
            phone=jQuery("#countryno").val()+phone;
        if (!phone) {
            jQuery(".formorder-login-form input.phone").addClass("login-error");
            slider.init();
            jQuery("#labelTip").html("<?php echo ltext('Please drag the slider to validate phone') ?>");
            jQuery("#labelTip").css("color","#787878");
        } else if (!isMobile(phone)) {
            jQuery(".formorder-login-form input.phone").addClass("login-error");
            showTips("<?php echo ltext('Phone number is error') ?>");
            slider.init();
            jQuery("#labelTip").html("<?php echo ltext('Please drag the slider to validate phone') ?>");
            jQuery("#labelTip").css("color","#787878");
            return false;
        } else {
            jQuery(".formorder-login-form input.phone").removeClass("login-error");
        }

steve_SJF

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
手机电脑兼容的滑块验证 js

最近登录页面短信验证被盗刷，增加滑块验证。&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;&lt;title&gt;兼容PC端和移动端的jQuery拖动滑块验证&lt;/title&gt;&lt;meta charset="UTF-8"&gt;&lt;meta http-equiv=&qu
复制链接

扫一扫