js验证码实现
验证码实现方法
前端生成验证码
使用Canvas绘制随机验证码，包含数字、字母及干扰线。示例代码：
function generateCaptcha() {
const canvas = document.getElementById('captchaCanvas');
const ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 生成4位随机字符
const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghjkmnopqrstuvwxyz23456789';
let captchaText = '';
for (let i = 0; i < 4; i++) {
captchaText += chars.charAt(Math.floor(Math.random() * chars.length));
}
// 绘制验证码文本
ctx.font = '30px Arial';
ctx.fillStyle = '#000';
ctx.fillText(captchaText, 10, 30);
// 添加干扰线
for (let i = 0; i < 5; i++) {
ctx.beginPath();
ctx.moveTo(Math.random() * canvas.width, Math.random() * canvas.height);
ctx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height);
ctx.strokeStyle = `rgb(${Math.random() * 255},${Math.random() * 255},${Math.random() * 255})`;
ctx.stroke();
}
return captchaText;
}
// 初始化验证码
const currentCaptcha = generateCaptcha();验证码校验逻辑
在表单提交时进行验证码比对：
document.getElementById('submitBtn').addEventListener('click', function() {
const userInput = document.getElementById('captchaInput').value;
if (userInput.toLowerCase() !== currentCaptcha.toLowerCase()) {
alert('验证码错误');
generateCaptcha(); // 刷新验证码
return false;
}
// 继续提交表单
});服务端验证方案
对于安全性要求高的场景，应结合后端验证：
- 前端生成验证码时，同时将验证码文本通过加密方式发送到服务端存储（如Session）
- 提交表单时将用户输入和Session存储的验证码进行比对
- 每次验证后立即清除Session中的验证码
增强安全性措施
- 限制验证码有效时间（如5分钟过期）
- 记录验证失败次数，达到阈值后锁定账号
- 使用更复杂的图形验证码（如滑动拼图、点选文字等）
- 考虑接入第三方验证服务（如reCAPTCHA）
可访问性优化
- 提供语音验证码选项
- 添加验证码刷新按钮
- 确保验证码有足够的颜色对比度
- 为Canvas添加替代文本说明
以上方案可根据实际需求组合使用，前端验证适合简单场景，关键业务必须结合服务端验证。
