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 極簡響應式滑塊驗證組件實現，隨機滑塊位置 - 高質量源碼分享平臺-免費下載各類網站源碼與模板及前沿動態資訊