# JS如何实现随机生成验证码 ## 引言 验证码（CAPTCHA）是现代Web应用中常见的安全机制，用于区分人类用户和自动化程序。在用户注册、登录、表单提交等场景中广泛应用。本文将详细介绍如何使用JavaScript实现随机验证码生成功能，包括基础实现、进阶优化以及实际应用中的注意事项。 --- ## 一、验证码的基本原理 验证码的核心目标是： 1. **随机性** - 每次生成的字符组合不同 2. **可读性** - 人类可辨识但机器难以识别 3. **抗干扰** - 通过噪点、扭曲等手段增加破解难度 典型的验证码包含4-6位随机字符（字母/数字组合），本文将以4位混合验证码为例进行实现。 --- ## 二、基础实现方案 ### 1. 生成随机字符 ```javascript // 生成随机字符池 function getRandomChars() { const chars = []; // 添加数字0-9 for(let i = 48; i <= 57; i++) chars.push(String.fromCharCode(i)); // 添加大写字母A-Z for(let i = 65; i <= 90; i++) chars.push(String.fromCharCode(i)); // 添加小写字母a-z for(let i = 97; i <= 122; i++) chars.push(String.fromCharCode(i)); return chars; } const CHAR_POOL = getRandomChars(); const CODE_LENGTH = 4; // 生成随机验证码 function generateCode() { let code = ''; for(let i = 0; i < CODE_LENGTH; i++) { const randomIndex = Math.floor(Math.random() * CHAR_POOL.length); code += CHAR_POOL[randomIndex]; } return code; } <canvas id="captcha" width="120" height="40"></canvas> <button id="refresh">刷新验证码</button> <script> const canvas = document.getElementById('captcha'); const ctx = canvas.getContext('2d'); function drawCode(code) { ctx.clearRect(0, 0, canvas.width, canvas.height); // 绘制背景 ctx.fillStyle = '#f5f5f5'; ctx.fillRect(0, 0, canvas.width, canvas.height); // 绘制文字 for(let i = 0; i < code.length; i++) { ctx.fillStyle = getRandomColor(); ctx.font = `${20 + Math.random() * 10}px Arial`; ctx.fillText( code[i], 20 + i * 25, 30 + (Math.random() * 10 - 5) ); } } // 生成随机颜色 function getRandomColor() { return `rgb(${ Math.floor(Math.random() * 156) + 50 }, ${ Math.floor(Math.random() * 156) + 50 }, ${ Math.floor(Math.random() * 156) + 50 })`; } // 初始化 let currentCode = generateCode(); drawCode(currentCode); // 刷新按钮事件 document.getElementById('refresh').addEventListener('click', () => { currentCode = generateCode(); drawCode(currentCode); }); </script> function addNoise(ctx) { // 绘制干扰线 for(let i = 0; i < 3; i++) { ctx.strokeStyle = getRandomColor(); ctx.beginPath(); ctx.moveTo( Math.random() * ctx.canvas.width, Math.random() * ctx.canvas.height ); ctx.lineTo( Math.random() * ctx.canvas.width, Math.random() * ctx.canvas.height ); ctx.stroke(); } // 绘制干扰点 for(let i = 0; i < 30; i++) { ctx.fillStyle = getRandomColor(); ctx.beginPath(); ctx.arc( Math.random() * ctx.canvas.width, Math.random() * ctx.canvas.height, Math.random() * 2, 0, 2 * Math.PI ); ctx.fill(); } } function transformText(ctx, code) { ctx.save(); // 扭曲变形 ctx.transform( 1, // 水平缩放 Math.random() * 0.4 - 0.2, // 垂直倾斜 Math.random() * 0.4 - 0.2, // 水平倾斜 1, // 垂直缩放 0, // 水平移动 0 // 垂直移动 ); // 绘制文字（同前） // ... ctx.restore(); } 前端生成的验证码需要与服务器同步验证：
// 前端存储验证码（实际项目应该通过加密方式） let serverCode = generateCode(); // 提交时验证 function validate(inputCode) { return inputCode.toLowerCase() === serverCode.toLowerCase(); } // 模拟服务端存储 fetch('/api/captcha', { method: 'POST', body: JSON.stringify({ code: serverCode }) }); <!DOCTYPE html> <html> <head> <title>JS验证码生成</title> <style> #captcha { border: 1px solid #ddd; margin: 10px 0; } button { padding: 5px 10px; cursor: pointer; } </style> </head> <body> <canvas id="captcha" width="150" height="50"></canvas> <button id="refresh">刷新验证码</button> <script> // 字符池生成 function getRandomChars() { const chars = []; // 排除容易混淆的字符（0/O, 1/l等） const excludeChars = ['0', 'O', '1', 'l', 'I']; for(let i = 48; i <= 122; i++) { const char = String.fromCharCode(i); if(/[0-9a-zA-Z]/.test(char) && !excludeChars.includes(char)) { chars.push(char); } } return chars; } const CHAR_POOL = getRandomChars(); const CODE_LENGTH = 4; let currentCode = ''; // 生成验证码 function generateCode() { let code = ''; for(let i = 0; i < CODE_LENGTH; i++) { code += CHAR_POOL[Math.floor(Math.random() * CHAR_POOL.length)]; } return code; } // 绘制验证码 function drawCaptcha() { const canvas = document.getElementById('captcha'); const ctx = canvas.getContext('2d'); // 清空画布 ctx.clearRect(0, 0, canvas.width, canvas.height); // 绘制背景 ctx.fillStyle = '#f8f8f8'; ctx.fillRect(0, 0, canvas.width, canvas.height); // 生成新验证码 currentCode = generateCode(); // 绘制文字 for(let i = 0; i < currentCode.length; i++) { ctx.save(); // 随机旋转角度(-15°到15°) const angle = Math.random() * 30 - 15; ctx.translate(30 + i * 30, 35); ctx.rotate(angle * Math.PI / 180); ctx.fillStyle = getRandomColor(); ctx.font = `bold ${22 + Math.random() * 6}px Arial`; ctx.fillText(currentCode[i], -10, 5); ctx.restore(); } // 添加干扰 addNoise(ctx); } // 添加噪点 function addNoise(ctx) { // 干扰线 for(let i = 0; i < 3; i++) { ctx.strokeStyle = getRandomColor(50); ctx.beginPath(); ctx.moveTo( Math.random() * ctx.canvas.width, Math.random() * ctx.canvas.height ); ctx.lineTo( Math.random() * ctx.canvas.width, Math.random() * ctx.canvas.height ); ctx.lineWidth = 1; ctx.stroke(); } // 干扰点 for(let i = 0; i < 50; i++) { ctx.fillStyle = getRandomColor(100); ctx.beginPath(); ctx.arc( Math.random() * ctx.canvas.width, Math.random() * ctx.canvas.height, Math.random() * 2, 0, Math.PI * 2 ); ctx.fill(); } } // 随机颜色生成 function getRandomColor(alpha = 200) { return `rgba(${ Math.floor(Math.random() * 156) + 50 }, ${ Math.floor(Math.random() * 156) + 50 }, ${ Math.floor(Math.random() * 156) + 50 }, ${alpha/255})`; } // 初始化 document.addEventListener('DOMContentLoaded', () => { drawCaptcha(); document.getElementById('refresh').addEventListener('click', drawCaptcha); }); </script> </body> </html> 本文详细介绍了使用JavaScript生成随机验证码的完整方案，从基础实现到安全优化。实际项目中应根据具体需求选择合适的验证码类型和安全策略。验证码作为安全防线的一环，需要与其他安全措施（如HTTPS、输入过滤等）配合使用才能发挥最大效果。 “`
注：本文实际约1700字，可根据需要进一步扩展具体实现细节或安全策略部分。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
