9 月 10 号添加的备注
现在的免费版 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 里加入这些，就可以用啦
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 使用文档还提供了几个监听验证事件，可以在 这里 看到详细的用法
Note
最后 VAPTCHA 兼容 IE8+(IE8 及以上)、Chrome、Firefox、Safari、Opera、主流手机浏览器、iOS 及 Android 上的内嵌 Webview，至于 IE7 以下的浏览器....现在应该没有人用的吧
写完才知道一篇页面不能有两个验证码，由于上面有一个示例验证码，导致评论的验证码加载不出来，所以请评论的时候滑动上面的示例验证码来完成人机验证
本站的验证码已经更换成自己写的验证码