js实现验证码
使用Canvas生成图形验证码
在HTML中创建一个Canvas元素用于绘制验证码。通过JavaScript随机生成数字或字母组合，并添加干扰线、噪点等干扰元素增强安全性。
<canvas id="captcha" width="120" height="40"></canvas>
<button onclick="generateCaptcha()">刷新验证码</button>function generateCaptcha() {
const canvas = document.getElementById('captcha');
const ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 生成随机4位验证码（数字+字母）
const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
let captcha = '';
for (let i = 0; i < 4; i++) {
const index = Math.floor(Math.random() * chars.length);
captcha += chars[index];
}
// 绘制验证码文本
ctx.font = '24px Arial';
ctx.fillStyle = '#333';
ctx.fillText(captcha, 10, 25);
// 添加干扰线
for (let i = 0; i < 3; i++) {
ctx.strokeStyle = `rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255})`;
ctx.beginPath();
ctx.moveTo(Math.random()*canvas.width, Math.random()*canvas.height);
ctx.lineTo(Math.random()*canvas.width, Math.random()*canvas.height);
ctx.stroke();
}
// 存储验证码用于验证
window.currentCaptcha = captcha;
}实现验证逻辑
在表单提交时比较用户输入与生成的验证码是否匹配。
document.getElementById('submit-btn').addEventListener('click', function() {
const userInput = document.getElementById('captcha-input').value.toUpperCase();
if (userInput === window.currentCaptcha) {
alert('验证码正确');
} else {
alert('验证码错误');
generateCaptcha(); // 刷新验证码
}
});增加滑动验证码
通过滑块拖动完成验证的方式更友好。
<div class="slider-container">
<div class="slider-track"></div>
<div class="slider-thumb"></div>
<div class="slider-mask"></div>
</div>let isVerified = false;
const thumb = document.querySelector('.slider-thumb');
const mask = document.querySelector('.slider-mask');
const maxWidth = document.querySelector('.slider-track').offsetWidth;
thumb.addEventListener('mousedown', function(e) {
document.addEventListener('mousemove', moveHandler);
document.addEventListener('mouseup', upHandler);
});
function moveHandler(e) {
let newLeft = e.clientX - thumb.parentElement.getBoundingClientRect().left;
newLeft = Math.max(0, Math.min(newLeft, maxWidth));
thumb.style.left = mask.style.width = newLeft + 'px';
// 到达终点验证
if (Math.abs(newLeft - maxWidth) < 5) {
isVerified = true;
thumb.textContent = '✓';
}
}
function upHandler() {
document.removeEventListener('mousemove', moveHandler);
if (!isVerified) {
thumb.style.left = mask.style.width = '0';
}
}使用第三方库简化开发
推荐使用以下成熟验证码库：
canvas-captcha: 轻量级Canvas验证码生成器slider-captcha: 滑动拼图验证组件google-recaptcha: Google官方验证服务
安装示例：
npm install canvas-captcha使用示例：
const Captcha = require('canvas-captcha');
const captcha = new Captcha();
document.getElementById('captcha-image').src = captcha.dataURL;
