原生JS生成指定位数的验证码

 更新时间:2020年10月28日 10:52:29   作者:果汁盒  
这篇文章主要为大家详细介绍了原生JS生成指定位数的验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

使用原生JS生成指定位数的验证码,验证码包括字母和数字

##思路:使用String的fromCharCode方法将给定范围的随机数转为大小写字母,再通过随机数决定数组当前位置为大写字母,小写字母或者是数字,函数传入的参数当做该数组的长度,随机填好数组后,对数组内的元素做分情况处理:当该数组内没有数字时,需要随机修改一个字母为一个随机的数字;当该数组没有字母时,需随机修改一个数字为大写或者小写字母;正常情况下的有字母也有数字不做处理,每个判断语句的最后使用数组的join方法将该数组转换为字符串并return。

function verificationCode(num) {
  var arr = [];
  var letterFlag = false;
  var numberFlag = false;
  for (i = 0; i < num; i++) {
    // 获取随机大写字母
    var uppercase = String.fromCharCode(Math.round(Math.random() * 25 + 65));
    // 获取随机小写字母
    var lower = String.fromCharCode(Math.round(Math.random() * 25 + 97));
    // 获取随机数字
    var number = Math.round(Math.random() * 9);
    // 获取0-2的随机数来随机决定该位置是大写字母,小写字母或者是数字
    var temp = Math.round(Math.random() * 2)
    if (temp == 0) {
      arr[i] = uppercase;
    } else if (temp == 1) {
      arr[i] = lower;
    } else {
      arr[i] = number;
    }
  }
  // 检查arr是否同时有字母与数字
  for (var j = 0; j < arr.length; j++) {
    if (Object.prototype.toString.call(arr[j]) == "[object String]") {
      letterFlag = true;
    }
    if (typeof(arr[j]) == 'number') {
      numberFlag = true;
    }
  }
  // 对不同情况做处理
  // 字母数字都有
  if (letterFlag && numberFlag) {
    return arr.join("");
  }
  // 没有字母时
  if (letterFlag == false && numberFlag == true) {
    uppercase = String.fromCharCode(Math.round(Math.random() * 25 + 65));
    lower = String.fromCharCode(Math.round(Math.random() * 25 + 97));
    temp = Math.round(Math.random() * 1)
    if (temp == 0) {
      arr[Math.round(Math.random() * (num - 1))] = uppercase;
    } else {
      arr[Math.round(Math.random() * (num - 1))] = lower;
    }
    return arr.join("");
  }
  // 没有数字时
  if (letterFlag == true && numberFlag == false) {
    number = Math.round(Math.random() * 9);
    arr[Math.round(Math.random() * (num - 1))] = number;
    return arr.join("");
  }
}
var code = verificationCode(10);
console.log(code);

运行结果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 用户引导插件driverjs的基本使用以及弹窗样式修改方法

    用户引导插件driverjs的基本使用以及弹窗样式修改方法

    Driver.js是一个强大的、轻量级、使用原生JavaScript引擎开发的库,用于在页面聚焦用户的关注点,下面这篇文章主要介绍了用户引导插件driverjs的基本使用以及弹窗样式修改方法,需要的朋友可以参考下
    2024-04-04
  • moment.js轻松实现获取当前日期是当年的第几周

    moment.js轻松实现获取当前日期是当年的第几周

    这篇文章主要介绍了moment.js轻松实现获取当前日期是当年的第几周,需要的朋友可以参考下
    2015-02-02
  • JS实现的点击按钮图片上下滚动效果示例

    JS实现的点击按钮图片上下滚动效果示例

    这篇文章主要介绍了JS实现的点击按钮图片上下滚动效果,涉及javascript事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
    2019-01-01
  • 使用JavaScript制作待办事项列表的示例代码

    使用JavaScript制作待办事项列表的示例代码

    这篇文章主要介绍了如何使用 JavaScript创建待办事项列表HTML的完整信息和教程,文中但是示例代码讲解详细,感兴趣的同学可以动手试一试
    2022-01-01
  • video.js添加自定义组件的方法

    video.js添加自定义组件的方法

    这篇文章主要介绍了videojs添加自定义组件的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-12-12
  • select2 ajax 设置默认值,初始值的方法

    select2 ajax 设置默认值,初始值的方法

    今天小编就为大家分享一篇select2 ajax 设置默认值,初始值的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • javascript 系统文件夹文件操作及参数介绍

    javascript 系统文件夹文件操作及参数介绍

    javascript文件操作包括写入文件、当前目录文件、读文件、删除文件、批量删除,未删除文件夹,删除不了当前目录文件等等,感兴趣的朋友可以参考下
    2013-01-01
  • jQuery scrollFix滚动定位插件

    jQuery scrollFix滚动定位插件

    这篇文章主要介绍了jQuery scrollFix滚动定位插件,当用户向上或向下滚动页面到一定位置时,目标元素开始固定定位(position:fixed),当回滚到原位置时目标元素恢复到原状态,需要的朋友可以参考下
    2015-04-04
  • 莱鸟介绍window.print()方法

    莱鸟介绍window.print()方法

    这篇文章主要介绍了莱鸟介绍window.print()方法的相关资料,需要的朋友可以参考下
    2016-01-01
  • 简单聊聊JavaScript的事件循环机制

    简单聊聊JavaScript的事件循环机制

    前端开发的童鞋应该都知道,JavaScript是一门单线程的脚本语言,这就意味着JavaScript 代码在执行的时候,只有一个主线程来执行所有的任务,同一个时间只能做同一件事情,这篇文章主要给大家介绍了关于JavaScript事件循环机制的相关资料,需要的朋友可以参考下
    2022-03-03

最新评论