JS验证码功能实现：随机字符、样式变换与提交验证完整代码

本文分享使用 JavaScript 实现验证码功能的具体代码示例，供读者参考学习。

前文已对实现步骤进行拆解讲解，若无需了解细节可直接跳过至文末查看带注释的完整代码及运行效果。

HTML 结构与 CSS 样式基础

首先需在 HTML 页面中构建基础结构，包括一个用于输入验证码的文本框、一个用于展示验证码内容的容器 div 以及一个提交按钮。


<body>
 <input type="text">
 <div></div>
 <button>提交</button>
</body>

接下来为上述元素添加相应的 CSS 样式，以调整其外观和布局。


input {
 width: 150px;
 height: 30px;
 outline: none;
 font-size: 24px;
 vertical-align: middle;
}

button {
 outline: none;
 vertical-align: middle;
 cursor: pointer;
}

div {
 display: inline-block;
 width: 90px;
 height: 40px;
 line-height: 40px;
 text-align: center;
 vertical-align: middle;
 background-color: #ddd;
 cursor: pointer;
}

添加样式后的页面大致呈现如下形态（视觉效果可能较为简单，但核心逻辑在于 JavaScript 的实现）。

HTML 结构与 CSS 样式基础

JavaScript 核心逻辑实现

接下来开始编写 JavaScript 代码部分。

首先，通过 document.querySelector 获取页面上的输入框、提交按钮和验证码显示容器这三个 DOM 元素。


var input = document.querySelector('input');
var btn = document.querySelector('button');
var div = document.querySelector('div');

随后，定义一个包含所有可能字符的字符串库，并初始化一个用于存储当前生成验证码的全局变量。


var characters = "QWETYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm1234567890";
var str;

字符库直接通过键盘输入定义，包含大小写字母和数字。

由于验证码生成需要频繁使用随机数，为方便调用，预先封装一个生成指定范围内随机整数的函数。


function getRandom(l, r) {
 return parseInt(l + Math.random() * (r - l + 1));
}

为了防止用户直接选中并复制验证码文本，需通过事件监听禁用容器的文本选择功能。


div.addEventListener('selectstart', function (e) {
 e.preventDefault();
})

考虑到验证码并非仅在页面刷新时生成，用户看不清时可点击刷新，因此将生成验证码的核心逻辑封装在一个函数中以便多次调用。


function run() {
 str = '';
 while (div.hasChildNodes()) {
 div.removeChild(div.firstChild);
 }
 for (var i = 0; i < 4; i++) {
 var span = document.createElement('span');
 span.innerHTML = characters[getRandom(0, characters.length - 1)];
 span.style.display = 'inline-block';
 span.style.fontSize = getRandom(16, 32) + 'px';
 span.style.color = 'rgb(' + getRandom(0, 200) + ',' + getRandom(0, 200) + ',' + getRandom(0, 200) + ')';
 span.style.transform = 'translate(' + getRandom(-5, 5) + 'px, ' + getRandom(-5, 5) + 'px) rotate(' + getRandom(-20, 20) + 'deg)';
 str += span.innerHTML;
 div.appendChild(span);
 }
}

该函数的原理是创建 4 个 span 元素（此处设定为 4 位验证码），分别为每个 span 随机设置显示的字符、字体大小、字体颜色以及平移和旋转角度，然后将这些 span 添加到容器 div 中作为子节点。同时，务必将生成的字符累加到全局变量 str 中，以便后续验证使用。

在每次生成新验证码之前，需先清空容器 div 中的所有子节点以删除上一次生成的验证码，并将存储验证码字符的全局变量 str 重置为空。

页面加载完成时调用一次生成函数以显示初始验证码；同时为容器 div 绑定点击事件，每次点击时重新调用生成函数以刷新验证码。


run();
div.addEventListener('click', run);

为提交按钮绑定点击事件：首先判断用户输入的验证码是否正确，验证完成后刷新当前验证码，并自动清空输入框中的文本。


btn.addEventListener('click', function () {
 if (input.value.toLowerCase() == str.toLowerCase()) {
 alert('验证成功');
 } else {
 alert('验证失败');
 }
 run();
 input.value = '';
})

在判断验证码时，为了忽略大小写差异，使用 toLowerCase() 函数将用户输入的字符串和存储的验证码字符串均转换为小写后再进行比较。

功能总结与完整代码

至此，验证码的生成、刷新及验证功能已基本实现。

以下是实际运行效果的展示。

HTML 结构与 CSS 样式基础

以下是带有详细注释的完整代码示例。


<!DOCTYPE html>
<html lang="ch-ZN">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>js实现验证码</title>
 <style>
 input {
  width: 150px;
  height: 30px;
  outline: none;
  font-size: 24px;
  vertical-align: middle;
 }

 button {
  outline: none;
  vertical-align: middle;
  cursor: pointer;
 }

 div {
  display: inline-block;
  width: 90px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  vertical-align: middle;
  background-color: #ddd;
  cursor: pointer;
 }
 </style>
</head>

<body>
 <input type="text">
 <div></div>
 <button>提交</button>
 <script>
 // 获取元素
 var input = document.querySelector('input');
 var btn = document.querySelector('button');
 var div = document.querySelector('div');

 // 搞一个字符库
 var characters = "QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm1234567890";
 var str; // str用来储存验证码的文本

 // 生成一个在[l,r]范围内的随机整数的函数
 function getRandom(l, r) {
  return parseInt(l + Math.random() * (r - l + 1));
 }

 // 设置文本不可选中
 div.addEventListener('selectstart', function (e) {
  e.preventDefault();
 })

 // 生成验证码的函数
 function run() {

  // 先重置str
  str = '';

  // 删除掉div中的所有子节点
  while (div.hasChildNodes()) {
  div.removeChild(div.firstChild);
  }

  // 生成由四个字符组成的验证码
  for (var i = 0; i < 4; i++) {

  // 创建一个span对象
  var span = document.createElement('span');

  // 设置文本（从字库中随机抽取一个字符）
  span.innerHTML = characters[getRandom(0, characters.length - 1)];

  // 设置一些随机的样式
  span.style.display = 'inline-block';
  span.style.fontSize = getRandom(16, 32) + 'px';
  span.style.color = 'rgb(' + getRandom(0, 200) + ',' + getRandom(0, 200) + ',' + getRandom(0, 200) + ')';
  span.style.transform = 'translate(' + getRandom(-5, 5) + 'px, ' + getRandom(-5, 5) + 'px) rotate(' + getRandom(-20, 20) + 'deg)';
  str += span.innerHTML; // str记录字符
  div.appendChild(span); // 将span添加到div中
  }
 }


 run(); // 每次打开/刷新页面时先调用一次
 div.addEventListener('click', run); // 每次点击验证码的时候调用一次

 // 提交按钮点击事件
 btn.addEventListener('click', function () {
  if (input.value.toLowerCase() == str.toLowerCase()) {
  alert('验证成功');
  } else {
  alert('验证失败');
  }
  run();
  input.value = '';
 })
 </script>
</body>

</html>

以上。

希望本文的内容能对各位的学习有所帮助，欢迎继续支持本站获取更多技术分享。

JavaScript 实现动态验证码生成与验证

HTML 结构与 CSS 样式基础

JavaScript 核心逻辑实现

功能总结与完整代码

实用工具推荐