JavaScript 生成随机验证码 - 简单易用

function createCode() {
    var code_img = '';
    var codeLength = 4; // 验证码长度
    var checkCode = $('#code_img'); // 将要显示验证码的元素
    var codeChars = new Array(
        '0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
        'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I',
        'J', 'K', 'L', 'M', 'N',
        'O', 'P', 'Q', 'R', 'S',
        'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
    );
    for (var i = 0; i < codeLength; i++) {
        var charIndex = Math.floor(Math.random() * 36);
        code_img += codeChars[charIndex];
    }
    if (checkCode) {
        checkCode.val(code_img); // 将生成的验证码填入到相应元素中
    }
}

// 在页面加载时生成一个初始的验证码
$(document).ready(function() {
    createCode();
});

// 点击验证码图片时重新生成新的验证码
$('#code_img').click(function() {
    createCode();
});

// 在 id 为 code 的元素失去焦点时进行验证码的验证
$('#code').blur(function() {
    if (ifnull($(this).val())) {
        $('#code_msg').html('验证码不能为空');
    } else {
        var code = $('#code').val().toUpperCase(); // 将用户输入的验证码转换为大写字母
        var checkCode = $('#code_img').val().toUpperCase(); // 获取生成的验证码并转换为大写字母
        if (code == checkCode) {
            $('#code_msg').html('√').css('color', 'green');
        } else {
            $('#code_msg').html('验证码错误！').css('color', 'red');
            createCode(); // 重新生成新的验证码
        }
    }
});

// 验证码 input 代码
<input type='text' id='code' name='code' placeholder='验证码'>
<img src='' id='code_img' alt='验证码'>
<span id='code_msg'></span>

代码功能：

• 生成随机的 4 位验证码，包含数字和字母。
• 将生成的验证码显示在 #code_img 元素中。
• 当用户点击验证码图片时，会重新生成一个新的验证码。
• 用户在 #code 输入框中输入验证码后，失去焦点会进行验证。
• 验证成功则显示绿色 √，失败则显示红色错误信息并重新生成验证码。

使用说明：

1. 将上面的 JavaScript 代码复制到你的网页中。
2. 将 #code_img 元素的 src 属性设置为你的验证码图片的路径。
3. 将 ifnull() 函数替换为你的空值判断逻辑。

示例：

假设你的验证码图片路径为 /images/captcha.png，则 #code_img 元素的代码应为：

<img src='/images/captcha.png' id='code_img' alt='验证码'>

注意：

• 本代码仅供参考，请根据你的实际需求进行修改。
• 为了提高安全性，建议使用服务器端生成验证码并进行验证。