js实现简单的验证码
实现简单的验证码功能
验证码通常用于防止自动化脚本提交表单。以下是一个基于JavaScript的简单验证码实现方法。
生成随机验证码
创建一个函数生成随机字母数字组合作为验证码：
function generateCaptcha() {
const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
let captcha = '';
for (let i = 0; i < 6; i++) {
const randomIndex = Math.floor(Math.random() * chars.length);
captcha += chars[randomIndex];
}
return captcha;
}显示验证码
将生成的验证码显示在页面上：
function displayCaptcha() {
const captcha = generateCaptcha();
document.getElementById('captcha-display').textContent = captcha;
return captcha; // 返回用于验证
}验证用户输入
比较用户输入与生成的验证码：
function validateCaptcha() {
const userInput = document.getElementById('captcha-input').value;
const actualCaptcha = document.getElementById('captcha-display').textContent;
if (userInput === actualCaptcha) {
alert('验证码正确');
return true;
} else {
alert('验证码错误');
displayCaptcha(); // 刷新验证码
return false;
}
}HTML结构示例
<div id="captcha-display"></div>
<input type="text" id="captcha-input" placeholder="输入验证码">
<button onclick="validateCaptcha()">提交</button>
<button onclick="displayCaptcha()">刷新验证码</button>初始化验证码
页面加载时显示初始验证码：
window.onload = function() {
displayCaptcha();
};增加干扰线（可选）
为增强安全性，可以在Canvas上绘制验证码并添加干扰线：
function drawCaptcha() {
const canvas = document.getElementById('captcha-canvas');
const ctx = canvas.getContext('2d');
const captcha = generateCaptcha();
// 清空画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 绘制验证码文本
ctx.font = '30px Arial';
ctx.fillStyle = '#000';
ctx.fillText(captcha, 10, 30);
// 添加干扰线
for (let i = 0; i < 5; 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();
}
return captcha;
}对应的HTML：
<canvas id="captcha-canvas" width="150" height="50"></canvas>注意事项
- 前端验证码主要用于用户体验，不能替代服务器端验证
- 实际应用中应将验证码与服务器Session关联
- 可以增加验证码有效期限制
- 考虑添加点击刷新功能提升用户体验
这种实现方式适合基础需求，对于更高安全要求应考虑使用专业验证码服务或后端生成图形验证码。
