时下最流行的滑块验证，防止机器人恶意刷数据库

最新推荐文章于 2024-07-01 15:34:52 发布

Hloword

最新推荐文章于 2024-07-01 15:34:52 发布

阅读量9.9k

点赞数

本文链接：https://blog.csdn.net/qq_40100214/article/details/78503305

版权

本文介绍如何采用滑块验证方法，通过引入drag.js和drag.css文件，结合jQuery库，实现在表单提交时进行验证，有效阻止恶意的机器人刷数据库行为。

摘要由CSDN通过智能技术生成

/* 
 * drag 1.0
 * create by tony@jentian.com
 * date 2015-08-18
 * 拖动滑块
 */
/**
 * @param $
 */
(function($){
    $.fn.drag = function(options){
        var x, drag = this, isMove = false, defaults = {
        };
        var options = $.extend(defaults, options);
        //添加背景，文字，滑块
        var html = '<div class="drag_bg"></div>'+
                    '<div class="drag_text" onselectstart="return false;" unselectable="on">拖动滑块验证</div>'+
                    '<div class="handler handler_bg"></div>';
        this.append(html);
        
        var handler = drag.find('.handler');
        var drag_bg = drag.find('.drag_bg');
        var text = drag.find('.drag_text');
        var maxWidth = drag.width() - handler.width();  //能滑动的最大间距
        
        //鼠标按下时候的x轴的位置
        handler.mousedown(function(e){
            isMove = true;
            x = e.pageX - parseInt(handler.css('left'), 10);
        });
        
        //鼠标指针在上下文移动时，移动距离大于0小于最大间距，滑块x轴位置等于鼠标移动距离
        $(document).mousemove(function(e){
            var _x = e.pageX - x;
            if(isMove){
                if(_x > 0 && _x <= maxWidth){
                    handler.css({'left': _x});
                    drag_bg.css({'width': _x