myQaptcha 垃圾评论插件修改

前段时间博客经常被垃圾评论光顾，使用了Akismet插件但是评论信息都是发送到服务器他才可以验证，造成了服务器资源大量飙升。然后想着找个东西，能不能先在提交那里做个一层验证，防止机器评论。找了一下找到了不少插件什么的。最后选中了myQaptcha这个拖动插件，不用输入什么，只要鼠标拖动就行。在后台搜索安装之后，发现运行不了，打开控制台才发现这个插件依赖jquery，虽然我的主题默认加载了jquery，但是版本太高了，没有那个函数，谷歌了下，发现不少人有过这个问题。

意外的发现知更鸟博主修改了一下，让其支持高版本的 jquery。替换了原来的文件后，插件正常加载了。以前逛某宝时发现他的验证码，也是拖动式的，想着是不是可以修改成那样。毕竟都是拖动时，修改下css应该可以。毕竟原来的样式实在有点丑，和我的主题根本不搭。

本着折腾的精神，着手修改这个插件，把css修改了。file myQaptcha.jquery.css

/*****************/
/** QapTcha CSS **/
/*****************/
.QapTcha {padding:0 10px 10px 0;margin-top:10px;}
.QapTcha .clr{clear:both}
.QapTcha .bgSlider {width: 272px;height: 34px;background: #e8e8e8;float:left;}
.ui-draggable-rt{background: #fff url("../img/rt.png") no-repeat center;}
.ui-draggable-ok{background: #fff url("../img/ok.png") no-repeat center;}
.QapTcha .Slider {width: 40px;height: 32px;border: 1px solid #ccc;cursor: move;position: relative;}
.QapTcha .TxtStatus {width: 272px;height: 34px;position: absolute;text-align: center;line-height: 34px;moz-user-select: -moz-none;-moz-user-select: none;-o-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor: default;}
.QapTcha .dropSuccess {color: #fbfbfb;}
.okbg {height: 34px;background: #7ac23c;position: absolute;}
.QapTcha .dropError {color:#585858;moz-user-select: -moz-none;-moz-user-select: none;-o-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;}

发现好像只修改css没有用，拖动不了，嗯.....被挡住了，修改js文件 file myqaptcha.jquery.js

jQuery.QapTcha = {
    build: function(options) {
        var defaults = {
            txtLock: '请按住滑块，拖动到最右边',
            txtUnlock: '验证通过',
            disabledSubmit: true,
            autoRevert: true,
            PHPfile: myQaptchaJqueryPage,
            autoSubmit: false
        };

        if (this.length > 0)
            return jQuery(this).each(function(i) {
                /** Vars **/
                var
                    opts = jQuery.extend(defaults, options),
                    jQuerythis = jQuery(this),
                    form = jQuery('form').has(jQuerythis),
                    Clr = jQuery('<div>', {
                        'class': 'clr'
                    }),
                    bgSlider = jQuery('<div>', {
                        'class': 'bgSlider'
                    }),
                    Slider = jQuery('<div>', {
                        'class': 'Slider ui-draggable-rt'
                    }),
                    Icons = jQuery('<div>', {
                        'class': 'Icons'
                    }),
                    dis = jQuery(''),
                    TxtStatus = jQuery('<div>', {
                        'class': ' TxtStatus dropError',
                        text: opts.txtLock
                    }),
                    okbg = jQuery('<div>', {
                        'class': 'okbg'
                    }),
                    inputQapTcha = jQuery('<input>', {
                        name: generatePass(32),
                        value: generatePass(7),
                        type: 'hidden'
                    });

                /** Disabled submit button **/
                if (opts.disabledSubmit) form.find('input[type=\'submit\']').attr('disabled', 'disabled');

                /** Construct DOM **/
                Icons.appendTo(jQuerythis);
                okbg.insertAfter(Icons);
                TxtStatus.insertAfter(okbg);
                bgSlider.insertAfter(TxtStatus);
                Clr.insertAfter(bgSlider);
                dis.insertAfter(Clr);
                inputQapTcha.appendTo(jQuerythis);
                Slider.appendTo(bgSlider);

                jQuerythis.show();
                Slider.draggable({
                    drag: function(event, ui) {
                        okbg.css('width', ui.position.left);
                    },
                    revert: function() {
                        if (opts.autoRevert) {
                            if (parseInt(Slider.css("left")) >= 230)
                                return false;
                            else {
                                var ctime = 100; // 动画时间，毫秒
                                var cwidth = parseInt(Slider.css('left')); // 获取位置
                                var x = cwidth / ctime; // 求速度
                                interval = setInterval(_revert, 1);
                                function _revert() {
                                    cwidth -= x;
                                    if (cwidth > 0) {
                                        Slider.css('left', cwidth);
                                        okbg.css('width', cwidth);
                                    } else {
                                        Slider.css('left', 0);
                                        okbg.css('width', 0);
                                        clearInterval(interval);
                                        return false;
                                    }
                                }
                            }
                        }
                    },
                    containment: bgSlider,
                    axis: 'x',
                    stop: function(event, ui) {
                        if (ui.position.left >= 230) {
                            jQuery.post(opts.PHPfile, {
                                    action: '30corg',
                                    myQaptcha: inputQapTcha.attr('name')
                                },
                                function(data) {
                                    if (!data.error) {
                                        Slider.draggable('disable').css('cursor', 'default');
                                        Slider.addClass('ui-draggable-ok').removeClass('ui-draggable-rt');
                                        inputQapTcha.val('');
                                        TxtStatus.text(opts.txtUnlock).addClass('dropSuccess').removeClass('dropError');
                                        Icons.css('background-position', '-16px 0');
                                        form.find('input[type=\'submit\']').removeAttr('disabled');
                                    }
                                }, 'json');
                        }
                    }
                });

                function generatePass(nb) {
                    var chars = 'azertyupqsdfghjkmwxcvbn23456789AZERTYUPQSDFGHJKMWXCVBN_-#@';

                    var pass = '';
                    for (i = 0; i < nb; i++) {
                        var wpos = Math.round(Math.random() * chars.length);
                        pass += chars.substring(wpos, wpos + 1);
                    }
                    return pass;
                }

            });
    }
};
jQuery.fn.QapTcha = jQuery.QapTcha.build;

最后给后台加上了登录验证，代码不贴了。

使用这个插件后，垃圾评论就没有出现过，myQaptcha做一级拦截，Akismet做二级过滤

Download