大家好，欢迎来到IT知识分享网。

前言

现在大部分的网站和手机软件都会使用到验证码的登录、注册、操作提醒功能。但是，你知道验证码到底有多少类型吗？今天小编就利用KgCaptcha中的设置给你详细介绍一下。

滑动拼图

滑动拼图验证是在滑块验证码的基础上增加了一个随机滑动距离，用户需要将滑块滑到拼图的缺口处，使拼图完整，才能通过验证码。

文字点选

在文字点选验证码使用上，用户只要根据提示，按照顺序点击图中文字，即可完成验证。

语序点选

在语序点选验证码使用上，用户需按照常用语的顺序点击正确的文字，即可完成验证。

字体识别

在字体识别验证码使用上，点击与其它字符不同字体的文字，用户仅需一次点击，即可进行安全验证。

空间推理

在空间推理验证码使用上，根据提示，点击对应的元素，即可进行安全验证。

代码片段

下面，我以滑动式和点选式验证码为示例。

滑动式验证码

鼠标移动滑块，限制右侧的拖出范围，获取css样式中left值，然后计算出滑动距离。最后当鼠标松开，发送数据并验证。

/* 鼠标移动 onmousemove|ontouchmove */
function eventMove(e){
    /* 相关元素基本属性设置 */
    kg.show(sDiv[1], 1); /* 显示拉出进度条 */

    kg.html(sDiv[5], "");
    sDiv[1].style.width = "0px";
    slide.style.borderColor = "#2A62FF";  /* 小箭头边框颜色 */
    slide.style.backgroundImage = 'url("' + kgConfig["icon"][3] + '")';

    /* 拉出进度条长度 */
    sDiv[1].style.width = strip.offsetLeft + 20 + "px";  /* 20 为按钮下的重叠部分 */

    /* 滑动条箭头位置移动 */
    slide.style.left = (kg.os === "Phone" ? e.changedTouches[0].clientX : e.clientX) - offsetX + "px";  /* 小箭头位置移动 */
    if (slide.offsetLeft <= -kgConfig["border"][0]) {
        slide.style.left = "-" + kgConfig["border"][0] + "px";
    }
    var sMax = kgConfig["bgSize"][0] - 50 - kgConfig["border"][0]*3  /* 50 按钮宽度 */
    if (slide.offsetLeft > sMax) {
        slide.style.left = sMax + "px";
    }

    /* 同步拼图长条位置移动 */
    strip.style.left = slide.offsetLeft + "px";  /* 拼图长条位置移动 */
    if (strip.offsetLeft <= 0) {  /* 左侧拖出限制 */
        strip.style.left = "0px";
    }
    var tMax = kgConfig["bgSize"][0] - 62  /* 右侧拖出限制，52为拼图小方块内容大小/72为条形宽度 */
    if (strip.offsetLeft > tMax) {
        strip.style.left = tMax + "px";
    }
}

点选式验证码

点击文字，记录用户每次点击的位置并生成数字圆点和点击次数，当点击次数达到指定次数则发送数据并进行验证。

/* 点击文字事件 */ KgDisplay[2].addEventListener("mousedown", function (e) { if (clickCount === 0){ startTime = new Date().getTime(); /* 记录第一次点击时间 */ } e = e || window.event /* 获取点击位置 */ var clickCoord = kg.clickCoord(KgDisplay[2], e); if (strxy){strxy += ", "} strxy += "[" + clickCoord["x"] + ", " + clickCoord["y"] + "]"; /* 记录每次点击的坐标值 */ clickCount ++; /* 当前点击次数 */ /* 生成数字圆点 */ var cube = document.createElement('div'); cube.className = "SmallCube"; cube.style.left = clickCoord["x"]-14 + "px"; /* （宽24px + 边2px*2）/ 2 */ cube.style.top = clickCoord["y"]-14 + "px"; cube.innerHTML = clickCount.toString(); KgDisplay[2].parentNode.insertBefore(cube, KgDisplay[2].nextSibling); if (clickCount >= kgConfig["strCount"]){ /* 4次点完了 */ /* 发送数据并验证 */ ... } });

相关链接

官方地址：凯格行为验证码（KgCaptcha）滑动拼图验证，无感验证码，文字点选验证码

在线体验：凯格行为验证码在线体验

开发文档：凯格行为验证码-开发文档