JavaScript 验证码校验功能实现 - 随机生成、更换、验证

<div>
  <label>验证码：</label>
  <input type='text' id='captchaInput'>
  <button id='checkBtn'>确定</button>
  <button id='changeBtn'>看不清换一张</button>
</div>
<script>
// 随机生成6位数字字母组合的验证码
function generateCaptcha() {
  let captcha = '';
  const chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
  for (let i = 0; i < 6; i++) {
    captcha += chars[Math.floor(Math.random() * chars.length)];
  }
  return captcha;
}

let captcha = generateCaptcha(); // 生成初始验证码

document.getElementById('changeBtn').addEventListener('click', function() {
  captcha = generateCaptcha(); // 更换验证码
});

document.getElementById('checkBtn').addEventListener('click', function() {
  const input = document.getElementById('captchaInput').value;
  if (input === captcha) {
    alert('验证码输入正确');
    captcha = generateCaptcha(); // 验证码正确，更新验证码
  } else {
    alert('验证码输入错误');
  }
});
</script>