当前位置：首页 > JavaScript

js实现滑动验证码

2026-03-01 11:19:35JavaScript

实现滑动验证码的基本原理

滑动验证码的核心是用户通过拖动滑块完成拼图或对齐操作，服务器验证滑动轨迹是否合法。前端需实现滑块拖动、位置计算、轨迹记录等功能。

基本实现步骤

HTML结构

<div class="slider-captcha">
  <div class="slider-track"></div>
  <div class="slider-thumb"></div>
  <div class="slider-mask"></div>
</div>

CSS样式

.slider-captcha {
  position: relative;
  width: 300px;
  height: 40px;
  background: #f5f5f5;
}

.slider-track {
  height: 100%;
  background: #ddd;
}

.slider-thumb {
  position: absolute;
  width: 40px;
  height: 40px;
  background: #4CAF50;
  cursor: move;
  z-index: 2;
}

.slider-mask {
  position: absolute;
  left: 0;
  width: 0;
  height: 100%;
  background: rgba(0, 200, 0, 0.2);
}

JavaScript核心逻辑

const thumb = document.querySelector('.slider-thumb');
const mask = document.querySelector('.slider-mask');
let isDragging = false;
let startX = 0;
let thumbLeft = 0;
const maxWidth = 300 - 40; // 容器宽度减去滑块宽度

thumb.addEventListener('mousedown', (e) => {
  isDragging = true;
  startX = e.clientX;
  thumbLeft = thumb.offsetLeft;
  e.preventDefault();
});

document.addEventListener('mousemove', (e) => {
  if (!isDragging) return;

  const deltaX = e.clientX - startX;
  let newLeft = thumbLeft + deltaX;

  // 限制滑块范围
  newLeft = Math.max(0, Math.min(maxWidth, newLeft));

  thumb.style.left = `${newLeft}px`;
  mask.style.width = `${newLeft}px`;
});

document.addEventListener('mouseup', () => {
  if (!isDragging) return;
  isDragging = false;

  // 验证是否滑动到终点（可设置阈值）
  if (parseInt(thumb.style.left || 0) >= maxWidth - 5) {
    alert('验证成功');
  } else {
    thumb.style.left = '0';
    mask.style.width = '0';
  }
});

进阶功能实现

添加轨迹验证 记录用户滑动过程中的坐标和时间信息，用于后端验证：

const track = [];
let startTime = 0;

// 在mousedown事件中添加
startTime = Date.now();

// 在mousemove事件中添加
track.push({
  x: e.clientX,
  y: e.clientY,
  t: Date.now() - startTime
});

// 在mouseup事件中发送数据
console.log('滑动轨迹:', track);

添加拼图验证

<div class="puzzle-container">
  <div class="puzzle-image"></div>
  <div class="puzzle-hole"></div>
  <div class="puzzle-piece"></div>
</div>

// 随机生成拼图位置
function initPuzzle() {
  const holeSize = 50;
  const x = Math.random() * (300 - holeSize);
  const y = Math.random() * (150 - holeSize);

  document.querySelector('.puzzle-hole').style.cssText = `
    width: ${holeSize}px;
    height: ${holeSize}px;
    left: ${x}px;
    top: ${y}px;
  `;

  document.querySelector('.puzzle-piece').style.cssText = `
    width: ${holeSize}px;
    height: ${holeSize}px;
    background-position: -${x}px -${y}px;
  `;
}

安全增强措施

防止自动化工具

添加随机轨迹验证，要求滑动速度变化符合人类操作
设置最小滑动时间阈值（如1秒）
添加二次验证（如滑动完成后弹出图形验证码）

后端验证示例逻辑

function validateTrack(track) {
  // 检查是否直线滑动
  const startX = track[0].x;
  const endX = track[track.length-1].x;
  if (Math.abs(endX - startX) < 200) return false;

  // 检查滑动时间
  const duration = track[track.length-1].t;
  if (duration < 1000 || duration > 5000) return false;

  // 检查是否有停顿
  let pauses = 0;
  for (let i = 1; i < track.length; i++) {
    if (track[i].t - track[i-1].t > 100) pauses++;
  }
  if (pauses < 2) return false;

  return true;
}