JS随机验证码生成原理与代码实现详解

效果展示

实现原理

首先准备HTML结构，通常只需一个div元素，例如 <div id="code"></div>，其具体样式可根据实际需求进行设计。

其次在JavaScript逻辑中，第一步是将所有可能用于验证码的字符存入一个字符串变量中。

第二步是在该字符串的长度范围内，随机生成一个索引号。

第三步是根据生成的索引号从字符串中取出对应字符，并将多个字符拼接成最终的验证码字符串。

代码实现

HTML部分：

<div id="code"></div>

CSS部分：


* {
  margin: 0;
  padding: 0;
}
div {
  width: 80px;
  height: 30px;
  font-size: 18px;
  line-height: 30px;
  text-align: center;
  color: #333;
  border: 1px solid red;
  margin: 100px auto;
  cursor: pointer;
}

JavaScript部分：


var codeStr = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
var oDiv = document.getElementById('code');
// 用来生成随机整数
function getRandom(n, m) { // param: (Number, Number)
  n = Number(n);
  m = Number(m);
  // 确保 m 始终大于 n
  if (n > m) {
    var temp = n;
    n = m;
    m = temp;
  }
  // 下有详细说明
  return Math.floor(Math.random()*(m - n) + n);
}
// 将随机生成的整数下标对应的字母放入div中
function getCode() {
  var str = '';
  // 验证码有几位就循环几次
  for (var i = 0;i < 4;i ++) {
    var ran = getRandom(0, 62);
    str += codeStr.charAt(ran);
  }
  oDiv.innerHTML = str;
}
getCode();// 调用函数，页面刷新也会刷新验证码
// 点击刷新验证码
oDiv.onclick = function(){
  getCode();
}

代码分析

JS逻辑详解：

第一步是将所有用于生成验证码的字符组合成一个字符串。

对应代码第1行，该字符串不仅包含字母和数字，也可以加入中文汉字等其他字符。

第二步是在字符串长度范围内随机生成索引号。

第4行的函数用于生成随机整数，参数 (n, m) 需为数字类型，通过 Number() 确保输入值为数值型。

默认假设 m 大于 n，若传参有误导致 n 大于 m，则通过 if 判断交换两个变量的值以修正顺序。

Math.random() 的返回值区间为 [0,1)。

Math.random() * (m - n) 的返回值区间变为 [0, m - n)。

Math.random() * (m - n) + n 的返回值区间变为 [n, m)。

为了确保能取到 codeStr 的所有下标，当 m 设为 codeStr.length 时，由于 Math.random() 不包含1，需使用 Math.floor() 向下取整，从而覆盖到最后一位。

当 n 为 0，m 为 codeStr.length 时，随机范围覆盖 codeStr 的所有元素下标。例如 (n, m) 为 (0, 62)，计算后的取值范围为下标 [0, 61] 的整数。

第三步是根据下标查找对应元素，拼接成验证码字符串。

第17行的函数 getCode() 负责获取字符串中对应下标的元素，拼接成字符串后返回到页面中。最后点击 div 可不断生成新的随机验证码。

完整代码


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>随机生成验证码</title>
  <style>
  * {
    margin: 0;
    padding: 0;
  }
  div {
    width: 80px;
    height: 30px;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    color: #333;
    border: 1px solid red;
    margin: 100px auto;
    cursor: pointer;
  }
  </style>
</head>

<body>
  <div id="code"></div>

  <script>
  var codeStr = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
  var oDiv = document.getElementById('code');
  // 用来生成随机整数
  function getRandom(n, m) { // param: (Number, Number)
    n = Number(n);
    m = Number(m);
    // 确保 m 始终大于 n
    if (n > m) {
      var temp = n;
      n = m;
      m = temp;
    }
    return Math.floor(Math.random()*(m - n) + n);
  }
  // 将随机生成的整数下标对应的字母放入div中
  function getCode() {
    var str = '';
    // 验证码有几位就循环几次
    for (var i = 0;i < 4;i ++) {
      var ran = getRandom(0, 62);
      str += codeStr.charAt(ran);
    }
    oDiv.innerHTML = str;
  }
  getCode();// 调用函数，页面刷新也会刷新验证码
  // 点击刷新验证码
  oDiv.onclick = function(){
    getCode();
  }
  </script>
</body>
</html>

总结

以上所述是小编给大家介绍的基于JS实现一个随机生成验证码功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对本站网站的支持！

基于JavaScript实现随机验证码生成的完整教程

效果展示

实现原理

代码实现

代码分析

完整代码

总结

实用工具推荐