React 极简响应式滑块验证组件实现，随机滑块位置

🎯 滑块验证组件 (Slider Captcha)

一个现代化、响应式的滑块验证组件，专为 React 应用设计，提供流畅的用户体验和强大的安全验证功能。

✨ 功能特性

🎮 核心功能

智能滑块拖拽 – 支持鼠标和触摸屏操作，响应灵敏
随机目标位置 – 每次验证生成不同的目标位置，提高安全性
实时位置验证 – 精确的位置检测，支持容错范围设置
状态反馈 – 清晰的视觉反馈，包括成功、错误和待验证状态

🎨 用户体验

流畅动画 – 平滑的过渡动画和微交互效果
响应式设计 – 完美适配桌面端和移动端
直观界面 – 简洁美观的 UI 设计，操作简单明了
即时反馈 – 实时显示验证状态和结果

🔧 技术特性

React Hooks – 使用最新的 React Hooks API
TypeScript 支持 – 完整的类型定义（可扩展）
Tailwind CSS – 现代化的样式框架
事件处理 – 完善的鼠标和触摸事件处理
性能优化 – 使用 useCallback 优化事件处理函数

🌟 产品亮点

拖拽体验 – 滑块跟随鼠标/手指移动，提供真实的拖拽感
视觉引导 – 绿色指示器显示目标位置，用户一目了然
状态动画 – 成功时的庆祝动画，错误时的震动反馈
触摸支持 – 完美支持移动端触摸操作
响应式布局 – 自适应不同屏幕尺寸
浏览器兼容 – 支持主流浏览器

🎯 使用场景

1. 用户注册/登录

防止机器人注册 – 在用户注册时验证人类用户
登录安全 – 在敏感操作前进行身份验证
密码重置 – 重置密码流程中的安全验证

2. 表单提交

评论系统 – 防止垃圾评论和恶意提交
联系表单 – 保护网站免受垃圾邮件攻击
调查问卷 – 确保问卷数据的真实性

3. 内容保护

下载验证 – 下载敏感文件前的身份验证
内容访问 – 访问付费或限制内容前的验证
API 调用 – 防止 API 接口被恶意调用

4. 电商应用

下单验证 – 防止恶意下单和刷单行为
优惠券领取 – 限制优惠券的领取频率
评价系统 – 确保评价的真实性

5. 管理后台

敏感操作 – 管理员执行危险操作前的确认
数据导出 – 导出大量数据前的安全验证
系统设置 – 修改关键系统设置时的验证

🚀 快速开始

使用组件

import SliderCaptcha from "./components/SliderCaptcha";function App() {return (<div className="App"><SliderCaptcha /></div>);
}

自定义配置

// 可以轻松扩展组件以支持自定义配置
const captchaConfig = {tolerance: 15, // 容错范围sliderWidth: 40, // 滑块宽度trackHeight: 48, // 轨道高度theme: "dark", // 主题样式
};

源码

import { useState, useRef, useEffect, useCallback } from "react";export default function SliderCaptcha() {const [isVerified, setIsVerified] = useState(false);const [isDragging, setIsDragging] = useState(false);const [sliderPosition, setSliderPosition] = useState(0);const [startX, setStartX] = useState(0);const [targetPosition, setTargetPosition] = useState(0);const [showSuccess, setShowSuccess] = useState(false);const [showError, setShowError] = useState(false);const sliderRef = useRef(null);const trackRef = useRef(null);const containerRef = useRef(null);// 生成随机目标位置useEffect(() => {const container = containerRef.current;if (container) {const containerWidth = container.offsetWidth;const sliderWidth = 32; // 滑块宽度 (w-8 = 32px)const maxPosition = containerWidth - sliderWidth;const randomPosition = Math.random() * (maxPosition - 50) + 25; // 避免太靠近边缘setTargetPosition(randomPosition);}}, []);// 获取客户端坐标const getClientX = useCallback((e) => {return e.touches ? e.touches[0].clientX : e.clientX;}, []);// 鼠标/触摸事件处理const handleStart = useCallback((e) => {if (isVerified) return;e.preventDefault();setIsDragging(true);setStartX(getClientX(e) - sliderPosition);setShowError(false);},[isVerified, sliderPosition, getClientX]);const handleMove = useCallback((e) => {if (!isDragging || isVerified) return;e.preventDefault();const container = containerRef.current;if (!container) return;const containerWidth = container.offsetWidth;const sliderWidth = 32;const maxPosition = containerWidth - sliderWidth;let newPosition = getClientX(e) - startX;newPosition = Math.max(0, Math.min(newPosition, maxPosition));setSliderPosition(newPosition);},[isDragging, isVerified, startX, getClientX]);const handleEnd = useCallback(() => {if (!isDragging || isVerified) return;setIsDragging(false);// 验证滑块位置const tolerance = 10; // 允许的误差范围const isCorrect = Math.abs(sliderPosition - targetPosition) <= tolerance;if (isCorrect) {setIsVerified(true);setShowSuccess(true);setTimeout(() => setShowSuccess(false), 2000);} else {setShowError(true);// 重置滑块位置setTimeout(() => {setSliderPosition(0);setShowError(false);}, 1000);}}, [isDragging, isVerified, sliderPosition, targetPosition]);// 重置验证const handleReset = () => {setIsVerified(false);setIsDragging(false);setSliderPosition(0);setShowSuccess(false);setShowError(false);// 重新生成目标位置const container = containerRef.current;if (container) {const containerWidth = container.offsetWidth;const sliderWidth = 32;const maxPosition = containerWidth - sliderWidth;const randomPosition = Math.random() * (maxPosition - 50) + 25;setTargetPosition(randomPosition);}};// 添加全局鼠标/触摸事件监听useEffect(() => {if (isDragging) {document.addEventListener("mousemove", handleMove);document.addEventListener("mouseup", handleEnd);document.addEventListener("touchmove", handleMove, { passive: false });document.addEventListener("touchend", handleEnd);return () => {document.removeEventListener("mousemove", handleMove);document.removeEventListener("mouseup", handleEnd);document.removeEventListener("touchmove", handleMove);document.removeEventListener("touchend", handleEnd);};}}, [isDragging, handleMove, handleEnd]);return (<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center p-4"><div className="bg-white rounded-2xl shadow-xl p-8 max-w-md w-full"><h2 className="text-2xl font-bold text-gray-800 mb-6 text-center">滑块验证</h2><div className="mb-6"><p className="text-gray-600 text-center mb-4">{isVerified ? "✅ 验证成功！" : "请将滑块拖拽到正确位置完成验证"}</p></div>{/* 验证区域 */}<divref={containerRef}className="relative bg-gray-100 rounded-lg h-12 mb-6 overflow-hidden">{/* 背景图片或图案 */}<div className="absolute inset-0 bg-gradient-to-r from-blue-200 to-purple-200 opacity-30"></div>{/* 目标位置指示器 */}<divclassName="absolute top-1 bottom-1 w-2 bg-green-600 rounded-lg shadow ring-2 ring-green-300 transition-opacity duration-300"style={{left: `${targetPosition}px`,opacity: isVerified ? 0 : 1,}}></div>{/* 滑块轨道 */}<divref={trackRef}className="absolute top-0 bottom-0 left-0 bg-blue-500 transition-all duration-300 ease-out"style={{width: `${sliderPosition}px`,opacity: isVerified ? 0.8 : 0.6,}}></div>{/* 滑块 */}{!isVerified && (<divref={sliderRef}className={`absolute top-1 bottom-1 w-8 bg-white rounded-md shadow-lg cursor-pointer transition-all duration-200 ease-out flex items-center justify-center${isDragging ? "shadow-xl scale-105" : ""}hover:shadow-lg${showError ? "animate-shake" : ""}`}style={{ left: `${sliderPosition}px` }}onMouseDown={handleStart}onTouchStart={handleStart}><svgclassName="w-4 h-4 text-gray-500"fill="currentColor"viewBox="0 0 20 20"><pathfillRule="evenodd"d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"clipRule="evenodd"/></svg></div>)}{/* 成功提示 */}{showSuccess && (<div className="absolute inset-0 bg-green-500 bg-opacity-20 flex items-center justify-center"><div className="bg-white rounded-lg px-4 py-2 shadow-lg"><span className="text-green-600 font-semibold">验证成功！</span></div></div>)}{/* 错误提示 */}{showError && (<div className="absolute inset-0 bg-red-500 bg-opacity-20 flex items-center justify-center"><div className="bg-white rounded-lg px-4 py-2 shadow-lg"><span className="text-red-600 font-semibold">位置错误，请重试</span></div></div>)}</div>{/* 操作按钮 */}<div className="flex gap-4"><buttononClick={handleReset}className="flex-1 bg-gray-500 hover:bg-gray-600 text-white font-semibold py-3 px-6 rounded-lg transition-colors duration-200">重置验证</button>{isVerified && (<buttononClick={() => alert("验证通过，可以继续操作！")}className="flex-1 bg-green-500 hover:bg-green-600 text-white font-semibold py-3 px-6 rounded-lg transition-colors duration-200">继续</button>)}</div>{/* 状态指示器 */}<div className="mt-4 text-center"><div className="inline-flex items-center gap-2 px-3 py-1 rounded-full text-sm">{isVerified ? (<><div className="w-2 h-2 bg-green-500 rounded-full"></div><span className="text-green-600">已验证</span></>) : (<><div className="w-2 h-2 bg-yellow-500 rounded-full animate-pulse"></div><span className="text-yellow-600">待验证</span></>)}</div></div></div></div>);
}

React 极简响应式滑块验证组件实现，随机滑块位置 - 高质量源码分享平台-免费下载各类网站源码与模板及前沿动态资讯