前端 javascript 代码怎么制作验证码

制作验证码是一项常见的前端任务，旨在防止恶意软件自动提交表单。在JavaScript中，制作验证码通常涉及到创建随机数或字符序列、将其显示为图形到用户界面上，并验证用户的输入是否与生成的验证码匹配。其中，创建随机数或字符序列是核心技术，因其确保了每次生成的验证码都具有一定的不可预测性，从而增大了自动化攻击的难度。

一、创建随机字符序列

创建随机字符序列是生成验证码的第一步。这个序列可以是纯数字、字母，或是二者的组合。JavaScript中，可以通过Math.random()生成随机数，然后将这个随机数转化为字符序列。

首先，定义一个函数来生成一个指定长度的随机字符串。我们可以创建一个包含所有可能字符的字符串，然后随机从中选择字符拼接成我们的验证码字符串。

function generateCode(length) {
    var characters       = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    var charactersLength = characters.length;
    var result           = '';
    for (var i = 0; i < length; i++ ) {
        result += characters.charAt(Math.floor(Math.random() * charactersLength));
    }
    return result;
}

这个函数接受一个参数length，代表生成的验证码长度，返回一个随机的字符串。

二、显示验证码

生成验证码后，我们需要将其展示给用户。这涉及到DOM操作和CSS样式。首先，在HTML中预留一个位置来显示验证码，通常是一个<canvas>或<span>元素。

其次，使用JavaScript把生成的验证码字符串显示到这个元素上。

对于<span>元素：

document.getElementById('captcha').innerText = generateCode(5);

如果选择<canvas>来更复杂地展示验证码（例如添加干扰线），则需要用到Canvas API来绘制文本和图形：

function drawCaptcha(code) {
    var canvas = document.getElementById('captchaCanvas');
    if (canvas.getContext) {
        var ctx = canvas.getContext('2d');
        // 清除之前的绘图
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        // 设置字体、颜色等
        ctx.font = '24px Arial';
        ctx.fillStyle = '#0088cc';
        // 绘制验证码文本
        ctx.fillText(code, 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 = '#'+(Math.random()*0xFFFFFF<<0).toString(16);
            ctx.stroke();
        }
    }
}
var code = generateCode(5);
drawCaptcha(code);

三、验证用户输入

最后一步是验证用户输入的验证码是否与生成的验证码一致。这通常发生在用户提交表单时。

首先，需要获取用户输入的验证码值，然后将其与我们保存的验证码值进行比较：

function validateCaptcha(input) {
    // 假设我们之前已将生成的验证码保存在'code'变量中
    if(input.toLowerCase() === code.toLowerCase()) {
        alert('验证码正确');
        return true;
    } else {
        alert('验证码错误，请重试');
        return false;
    }
}