9月10号添加的备注

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

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

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

验证码启动中...

验证码效果

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

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

<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 属性使其变成禁用状态，再在想要加入验证码的地方加上以下代码：

<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 里加入这些，就可以用啦

#vaptchaContainer{
  width: 200px;
  height: 36px;
}
.vaptcha-init-main {
  display: table;
  width: 100%;
  height: 100%;
  background-color: #eeeeee;
}
.vaptcha-init-loading {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.vaptcha-init-loading > a {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: none;
}
.vaptcha-init-loading > a img {
  vertical-align: middle;
}
.vaptcha-init-loading .vaptcha-text {
  font-family: sans-serif;
  font-size: 12px;
  color: #cccccc;
  vertical-align: middle;
}

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

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

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

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