js 验证码生成

在JavaScript中生成验证码通常涉及到创建一个包含随机字符或图像的验证码，并在前端显示给用户，同时将验证码的值存储在会话（session）或本地存储（localStorage/sessionStorage）中，以便后续验证用户输入的验证码是否正确。

以下是一个简单的JavaScript验证码生成示例：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>验证码生成</title>
</head>
<body>
    <img id="captchaImage" src="" alt="验证码">
    <button onclick="generateCaptcha()">刷新验证码</button>
    <form>
        <input type="text" id="captchaInput" placeholder="请输入验证码">
        <button type="submit">提交</button>
    </form>
    <script src="captcha.js"></script>
</body>
</html>

JavaScript部分（captcha.js）

// 生成随机验证码字符串
function generateRandomString(length) {
    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    let result = '';
    for (let i = 0; i < length; i++) {
        result += chars.charAt(Math.floor(Math.random() * chars.length));
    }
    return result;
}

// 创建验证码图像
function createCaptchaImage(text) {
    const canvas = document.createElement('canvas');
    canvas.width = 120;
    canvas.height = 40;
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = '#f2f2f2';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.font = 'bold 24px Arial';
    ctx.fillStyle = '#333';
    ctx.fillText(text, 10, 28);
    // 添加干扰线
    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 = '#ccc';
        ctx.stroke();
    }
    return canvas.toDataURL();
}

// 生成并显示验证码
function generateCaptcha() {
    const captchaText = generateRandomString(5);
    const captchaImage = createCaptchaImage(captchaText);
    document.getElementById('captchaImage').src = captchaImage;
    // 将验证码值存储在sessionStorage中
    sessionStorage.setItem('captcha', captchaText);
}

// 验证用户输入的验证码
document.querySelector('form').addEventListener('submit', function (event) {
    event.preventDefault();
    const userInput = document.getElementById('captchaInput').value;
    const storedCaptcha = sessionStorage.getItem('captcha');
    if (userInput === storedCaptcha) {
        alert('验证码正确！');
    } else {
        alert('验证码错误，请重试！');
        generateCaptcha(); // 刷新验证码
    }
});

// 初始化显示验证码
generateCaptcha();

说明

生成随机字符串：generateRandomString函数用于生成指定长度的随机字符串，作为验证码的文本内容。
创建验证码图像：createCaptchaImage函数使用HTML5的Canvas API来绘制验证码文本和干扰线，然后将画布内容转换为Data URL，以便在<img>标签中显示。
生成并显示验证码：generateCaptcha函数调用上述两个函数来生成验证码文本和图像，并将图像显示在页面上。同时，它还将验证码文本存储在sessionStorage中，以便后续验证。
验证用户输入：在表单提交时，JavaScript代码会检查用户输入的验证码是否与存储在sessionStorage中的验证码匹配，并给出相应的提示。

优势

简单易用：上述示例代码简洁明了，易于理解和实现。
安全性：通过使用随机字符串和干扰线，增加了验证码的复杂度，提高了安全性。
可定制性：可以根据需要调整验证码的长度、字体、颜色等属性。

应用场景

验证码广泛应用于网站和应用程序的登录、注册、找回密码等需要验证用户身份的场景，以防止恶意自动化攻击。

页面内容是否对你有帮助？

有帮助

没帮助

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

js 验证码生成

HTML部分

JavaScript部分（captcha.js）

说明

优势

应用场景

相关·内容

python中生成验证码的库

python实现验证码识别ddddocr

62-尚硅谷_MyBatisPlus_代码生成器_测试生成_生成代码解析

213、商城业务-认证服务-整合短信验证码

02-图像生成-02-VAE图像生成

02-图像生成-03-GAN图像生成

214、商城业务-认证服务-验证码防刷校验

028-尚硅谷-用户行为数据生成-日志生成

02-图像生成-04-扩散模型图像生成

029-尚硅谷-用户行为数据生成-日志生成脚本

01.尚硅谷_JS基础_JS简介

8个免费JS加密工具-[JS加密]

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐