JavaScript 实现验证码功能：随机生成、验证与更新

本文将使用 JavaScript 代码实现一个简单的验证码功能，包含以下步骤：

随机生成验证码： 生成 6 位随机的字母数字组合作为验证码。
用户输入验证： 用户在输入框内输入验证码，点击“确定”按钮进行验证。
验证结果提示： 根据输入是否正确弹出提示框，提示“验证码输入正确”或“验证码输入错误”。
自动更新验证码： 验证结束后，自动生成新的验证码。

HTML 代码

<input type='text' id='code' placeholder='请输入验证码'>
<button id='check'>确定</button>
<button id='change'>看不清换一张</button>

JavaScript 代码

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

var codeInput = document.getElementById('code');
var checkBtn = document.getElementById('check');
var changeBtn = document.getElementById('change');

// 初始验证码
var code = generateCode();
codeInput.value = code;

// 点击“看不清换一张”按钮，生成新验证码
changeBtn.onclick = function() {
  code = generateCode();
  codeInput.value = code;
}

// 点击“确定”按钮，校验验证码
checkBtn.onclick = function() {
  var inputCode = codeInput.value;
  if (inputCode === code) {
    alert('验证码输入正确');
  } else {
    alert('验证码输入错误');
  }
  // 校验完成后，生成新验证码
  code = generateCode();
  codeInput.value = code;
}

功能说明

generateCode() 函数: 该函数用于生成随机验证码，它从字母数字组合中随机选择 6 个字符构成验证码。
初始验证码： 页面加载时，会调用 generateCode() 生成一个初始验证码，并显示在输入框中。
“看不清换一张”按钮： 点击该按钮会调用 generateCode() 生成新的验证码，并更新输入框中的验证码。
“确定”按钮： 点击该按钮会获取用户输入的验证码，并与实际验证码进行比较。
验证结果提示： 根据比较结果弹出提示框，提示用户输入是否正确。
自动更新验证码： 每次验证结束后，都会自动生成新的验证码，并更新输入框中的内容。

总结

本文通过简洁的代码示例，演示了使用 JavaScript 实现一个简单的验证码功能。该功能可以用于网站注册、登录等需要进行用户身份验证的场景。

注意： 本示例只是一种简单的验证码实现方式，实际应用中可能需要更复杂的算法和安全措施来防止恶意攻击。