前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Typecho评论增加验证码

Typecho评论增加验证码

作者头像
小东东
发布2023-03-08 19:01:58
4020
发布2023-03-08 19:01:58
举报
文章被收录于专栏:小东东小东东

本文共 345 个字数,平均阅读时长 ≈ 1分钟

涉及文件

/Joe/core/function.php

  • 增加需要用到的函数
  • 增加如下3个函数
代码语言:javascript
复制
#生成验证码
function comment_protection_code(){
    $num1=rand(1,9);
    $num2=rand(1,9);
    $rand=rand(1,100)%3;
    switch($rand){
        case 0:
            $ret=$num1 + $num2;
            $symbol='+';
        break;
        case 1:
            $ret=$num1 - $num2;
            $symbol='-';
        break;
        case 2:
            $ret=$num1 * $num2;
            $symbol='×';
        break;
    }
    @session_start();
    $_SESSION['verify']=$ret;
    $_SESSION['verify_md5']=md5($num1.$num2);
    @session_write_close();
    echo "";
    echo "\n";
    echo "";
}

#判断路由用到
function endsWith($haystack, $needle){
    return $needle === '' || substr_compare($haystack, $needle, -strlen($needle)) === 0;
}

/Joe/public/comment.php

  • 目的: 增加验证码输入框
  • 搜索 输入网址 ,在它的下方增加一个节点,用来输入验证码
代码语言:javascript
复制
...

    

#上方为原始代码
#下方为新增

fields->code ==='yes'): ?>

/Joe/core/core.php

  • 目的: 在文章编辑时,增加设置开关
  • themeFields 方法中增加以下代码
代码语言:javascript
复制
$code = new Typecho_Widget_Helper_Form_Element_Radio (
        'code',
        array(
            'no' => '否',
            'yes' => '是'
        ),
        'no',
        '评论是否启用验证码',
        '介绍:用于设置当前文章评论时是否需要输入验证码 
 '
    );
    $layout->addItem($code);

/Joe/assets/js/joe.global.js

  • 目的: 在提交评论时,增加验证码校验参数
  • 打开未压缩版js文件,搜索 激活评论提交 ,用下方代码替换,然后压缩后替换同文件夹的joe.global.min.js
代码语言:javascript
复制
/* 激活评论提交 已修改 */
/* 激活评论提交 已修改 */
       {
        if ($('.joe_comment').length) {
            let isSubmit = false;
            $('.joe_comment__respond-form').on('submit', function (e) {
                e.preventDefault();
                const action = $('.joe_comment__respond-form').attr('action') + '?time=' + +new Date();
                const type = $('.joe_comment__respond-form').attr('data-type');
                const parent = $('.joe_comment__respond-form').attr('data-coid');
                const author = $(".joe_comment__respond-form .head input[name='author']").val();
                const _ = $(".joe_comment__respond-form input[name='_']").val();
                const mail = $(".joe_comment__respond-form .head input[name='mail']").val();
                const url = $(".joe_comment__respond-form .head input[name='url']").val();
                const sum = $(".joe_comment__respond-form .head input[name='sum']").val();
                const num1 = $(".joe_comment__respond-form .head input[name='num1']").val();
                const rand = $(".joe_comment__respond-form .head input[name='rand']").val();
                const num2 = $(".joe_comment__respond-form .head input[name='num2']").val();
                let text = $(".joe_comment__respond-form .body textarea[name='text']").val();
                if (sum === '') return Qmsg.info('请输入验证信息!');
                if (rand === '+') {
                    if (sum != Number(num1) + Number(num2)) return Qmsg.warning('验证码错误,请重试!');
                } else if (rand === '-') {
                    if (sum != Number(num1) - Number(num2)) return Qmsg.warning('验证码错误,请重试!');
                } else if (rand === '×') {
                    if (sum != Number(num1) * Number(num2)) return Qmsg.warning('验证码错误,请重试!');
                } 
                if (author.trim() === '') return Qmsg.info('请输入昵称!');
                if (!/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(mail)) return Qmsg.info('请输入正确的邮箱!');
                if (type === 'text' && text.trim() === '') return Qmsg.info('请输入评论内容!');
                if (type === 'draw') {
                    const txt = $('#joe_comment_draw')[0].toDataURL('image/webp', 0.1);
                    text = '{!{' + txt + '}!} ';
                }
                if (isSubmit) return;
                isSubmit = true;
                $('.joe_comment__respond-form .foot .submit button').html('发送中...');
                $.ajax({
                  url: action,
                  type: "POST",
                  data: { author, mail, text, parent, url, _ },
                  dataType: "text",
                  success(res) {
                    let arr = [],
                      str = "";
                    arr = $(res).contents();
                    Array.from(arr).forEach((_) => {
                      if (_.parentNode.className === "container") str = _;
                    });
                    if (!/Joe/.test(res)) {
                      Qmsg.warning(str.textContent.trim() || "");
                      isSubmit = false;
                      $(".joe_comment__respond-form .foot .submit button").html("发表评论");
                    } else {
                      window.location.reload();
                    }
                  },
                  error() {
                    isSubmit = false;
                    $(".joe_comment__respond-form .foot .submit button").html("发表评论");
                    Qmsg.warning("发送失败!请刷新重试!");
                  },
                });
            });
        }
    }

自定义css

目的: 在输入框左侧增加竖形分割线,统一外观

添加方式:Joe主题设置->全局设置->自定义CSS,粘贴下面的代码

代码语言:javascript
复制
/*验证码处css*/
@media (min-width: 768px) {
  .joe_comment__respond-form .head .list:nth-child(4) {
      position: relative
  }

  .joe_comment__respond-form .head .list:nth-child(4)::before {
      content: '';
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 1px;
      height: 15px;
      background: var(--classA)
  }

  .joe_comment__respond-form .head .list:nth-child(4)::before {
      left: 0
  }
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 涉及文件
    • /Joe/core/function.php
      • /Joe/public/comment.php
        • /Joe/core/core.php
          • /Joe/assets/js/joe.global.js
            • 自定义css
            相关产品与服务
            验证码
            腾讯云新一代行为验证码(Captcha),基于十道安全栅栏, 为网页、App、小程序开发者打造立体、全面的人机验证。最大程度保护注册登录、活动秒杀、点赞发帖、数据保护等各大场景下业务安全的同时,提供更精细化的用户体验。
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档