用jQuery实现验证码，并且验证码10秒内失效，点击验证码重新随机生成验证码

这里提供一种使用 jQuery 实现验证码的简单示例代码：

HTML 代码：

<div id="captcha">
  <input type="text" id="captcha-input">
  <img src="" id="captcha-img">
</div>

JavaScript 代码：

$(function() {
  // 生成验证码并显示
  generateCaptcha();

  // 点击验证码图片重新生成验证码
  $('#captcha-img').click(function() {
    generateCaptcha();
  });

  // 输入框失去焦点验证验证码
  $('#captcha-input').blur(function() {
    var input = $(this).val();
    if (input.toLowerCase() !== $('#captcha-img').data('captcha').toLowerCase()) {
      alert('验证码错误！');
      generateCaptcha();
    }
  });

  // 生成验证码
  function generateCaptcha() {
    // 生成随机验证码
    var captcha = '';
    var chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
    for (var i = 0; i < 4; i++) {
      captcha += chars.charAt(Math.floor(Math.random() * chars.length));
    }

    // 显示验证码图片
    var imgUrl = 'http://placehold.it/100x40?text=' + captcha;
    $('#captcha-img').attr('src', imgUrl).data('captcha', captcha);

    // 10秒后失效并重新生成验证码
    setTimeout(function() {
      generateCaptcha();
    }, 10000);
  }
});

上面的代码生成一个包含输入框和验证码图片的容器，当页面加载完毕时生成一个随机验证码，并将其显示在验证码图片上。当用户点击验证码图片时，重新生成一个随机验证码，并将其显示在验证码图片上。当用户输入验证码时，失去焦点时会进行验证，如果验证码错误，则弹出提示框并重新生成一个随机验证码。同时，为了保证验证码的安全性，验证码在10秒后会失效，并重新生成一个随机验证码。