9 月 10 号添加的备注

亲爱的用户，我们将在（2021 年）8 月 15 日对 VAPTCHA 进行升级更新。升级完成后，标准版将默认跳转到专用验证页进行验证，当少部分手机浏览器不支持 windows.open 方法打开新窗口时，则从当前页直接打开验证页进行验证，验证完成后回退到验证场景页，这样可能导致场景页用变量存储的表单数据丢失，建议改用 cookie 存储变量，未使用 JS 变量则忽略此消息。企业版维持原来验证方式，无需修改。

现在的免费版 VAPTCHA 验证码打开的时候会打开一个新的验证窗口，而不是以前的在当前页面进行验证。请自行取舍。

最近实在是不知道写什么东西，然后看到《Typecho 无插件实现评论算术验证》这篇文章介绍的一种算术验证码，我也来介绍一个可以交互的画画验证码。

首先去 VAPTCHA 官网注册一个账号，然后创建一个验证单元，具体的信息可以参考下面这个图，其中，标签可以乱填，域名填自己的域名就好，偏好这里自己选择一个合理的值。

创建完验证单元后，会得到一个 VID 密钥，再在主题的 after-footer.php (footer.php) 文件中引入以下 SDK 并初始化

HTML

<script src="https://v.vaptcha.com/v3.js"></script>
<script>
vaptcha({
    //配置参数
    vid: '******', // 这里填刚刚得到的 VID
    type: 'click',
    container: '#vaptchaContainer',
    }).then(function (vaptchaObj) {
        vaptchaObj.listen("pass", function () {
            // 验证成功，删除发送按钮的 disabled 属性
              document.getElementById(""/*这里填评论发送按钮的 Id*/).removeAttribute("disabled");
        });
        vaptchaObj.render()
    })
</script>

接着在主题的 comments.php 中给评论发送按钮加上 disabled 属性使其变成禁用状态，再在想要加入验证码的地方加上以下代码：

HTML

<div id="vaptchaContainer" title="要先验证才能评论哦 >_< ">
  <div class="vaptcha-init-main">
    <div class="vaptcha-init-loading">
      <img src="https://r.vaptcha.net/public/img/vaptcha-loading.gif"/>
      <span class="vaptcha-text">验证码启动中...</span>
    </div>
  </div>
</div>

最后在 CSS 里加入这些，就可以用啦

CodeBlock Loading...

VAPTCHA 使用文档还提供了几个监听验证事件，可以在这里看到详细的用法

Note
最后 VAPTCHA 兼容 IE8+(IE8 及以上)、Chrome、Firefox、Safari、Opera、主流手机浏览器、iOS 及 Android 上的内嵌 Webview，至于 IE7 以下的浏览器....现在应该没有人用的吧

写完才知道一篇页面不能有两个验证码，由于上面有一个示例验证码，导致评论的验证码加载不出来，所以请评论的时候滑动上面的示例验证码来完成人机验证

本站的验证码已经更换成自己写的验证码

一种可以交互的画画验证码

一种可以交互的画画验证码

9 月 10 号添加的备注

9 月 10 号添加的备注