前言
现在大部分的网站和手机软件都会使用到验证码的登录、注册、操作提醒功能。但是，你知道验证码到底有多少类型吗？今天小编就利用KgCaptcha中的设置给你详细介绍一下。
滑动拼图
滑动拼图验证是在滑块验证码的基础上增加了一个随机滑动距离，用户需要将滑块滑到拼图的缺口处，使拼图完整，才能通过验证码。
文字点选
在文字点选验证码使用上，用户只要根据提示，按照顺序点击图中文字，即可完成验证。
语序点选
在语序点选验证码使用上，用户需按照常用语的顺序点击正确的文字，即可完成验证。
字体识别
在字体识别验证码使用上，点击与其它字符不同字体的文字，用户仅需一次点击，即可进行安全验证。
空间推理
在空间推理验证码使用上，根据提示，点击对应的元素，即可进行安全验证。
代码片段
下面，我以滑动式和点选式验证码为示例。
滑动式验证码
鼠标移动滑块，限制右侧的拖出范围，获取css样式中left值，然后计算出滑动距离。最后当鼠标松开，发送数据并验证。
/* 鼠标移动 onmousemove|ontouchmove */functioneventMove(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"; } varsMax=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"; } vartMax=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=newDate().getTime(); /* 记录第一次点击时间 */ } e=e||window.event/* 获取点击位置 */varclickCoord=kg.clickCoord(KgDisplay[2], e); if (strxy){strxy+=", "} strxy+="["+clickCoord["x"] +", "+clickCoord["y"] +"]"; /* 记录每次点击的坐标值 */clickCount++; /* 当前点击次数 *//* 生成数字圆点 */varcube=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）滑动拼图验证，无感验证码，文字点选验证码
在线体验：凯格行为验证码在线体验
开发文档：凯格行为验证码-开发文档
