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


Posted in Javascript onOctober 28, 2020

使用原生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);

运行结果

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

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

Javascript 相关文章推荐
如何在Mozilla Gecko 用Javascript加载XSL
Jan 09 Javascript
childNodes.length与children.length的区别
May 14 Javascript
关于jquery css的使用介绍
Apr 18 Javascript
可自己添加html的伪弹出框实现代码
Sep 08 Javascript
微信小程序 聊天室简单实现
Apr 19 Javascript
vue解决跨域路由冲突问题思路解析
Nov 03 Javascript
这应该是最详细的响应式系统讲解了
Jul 22 Javascript
使用typescript构建Vue应用的实现
Aug 26 Javascript
JS实现网站吸顶条
Jan 08 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
Feb 14 Javascript
JavaScript事件委托实现原理及优点进行
Aug 29 Javascript
9个JavaScript日常开发小技巧
Oct 06 Javascript
微信小程序接入vant Weapp组件的详细步骤
Oct 28 #Javascript
Ant-design-vue Table组件customRow属性的使用说明
Oct 28 #Javascript
通过JS判断网页是否为手机打开
Oct 28 #Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
Oct 28 #Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
Oct 28 #Javascript
ant design vue中表格指定格式渲染方式
Oct 28 #Javascript
vue实现一个矩形标记区域(rectangle marker)的方法
Oct 28 #Javascript
You might like
星际争霸 Starcraft 编年史
2020/03/14 星际争霸
PHP扩展编写点滴 技巧收集
2010/03/09 PHP
用sql命令修改数据表中的一个字段为非空(not null)的语句
2010/06/04 PHP
codeigniter使用技巧批量插入数据实例方法分享
2013/12/31 PHP
php根据操作系统转换文件名大小写的方法
2014/02/24 PHP
ThinkPHP中处理表单中的注意事项
2014/11/22 PHP
Linux中为php配置伪静态
2014/12/17 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
使用laravel和ajax实现整个页面无刷新的操作方法
2019/10/03 PHP
PHP fopen中文文件名乱码问题解决方案
2020/10/28 PHP
jquery ajax例子返回值详解
2012/09/11 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
2015/01/18 Javascript
JavaScript基础知识之方法汇总结
2016/01/24 Javascript
深入理解js函数的作用域与this指向
2016/05/28 Javascript
jQuery自适应轮播图插件Swiper用法示例
2016/08/24 Javascript
浅析ES6的八进制与二进制整数字面量
2016/08/30 Javascript
jquery获取input type=text中的值的各种方式(总结)
2016/12/02 Javascript
WEEX环境搭建与入门详解
2019/10/16 Javascript
jquery ajax 请求小技巧实例分析
2019/11/11 jQuery
js数据类型转换与流程控制操作实例分析
2019/12/18 Javascript
[02:08]2014DOTA2国际邀请赛 430专访:力争取得小组前二
2014/07/11 DOTA
[11:01]2014DOTA2西雅图邀请赛 冷冷带你探秘威斯汀
2014/07/08 DOTA
[03:42]2018完美盛典-《加冕》
2018/12/16 DOTA
使用python BeautifulSoup库抓取58手机维修信息
2013/11/21 Python
python列表操作实例
2015/01/14 Python
Flask的图形化管理界面搭建框架Flask-Admin的使用教程
2016/06/13 Python
如何基于Python爬取隐秘的角落评论
2020/07/02 Python
Python Opencv实现单目标检测的示例代码
2020/09/08 Python
IE9对HTML5中部分属性不支持的原因分析
2014/10/15 HTML / CSS
商场端午节活动方案
2014/01/29 职场文书
统计岗位职责
2014/02/21 职场文书
应届毕业生自荐信例文
2014/02/26 职场文书
小学庆六一活动方案
2014/02/28 职场文书
反腐倡廉影片观后感
2015/06/08 职场文书
检讨书之工作不认真
2019/08/14 职场文书
python单元测试之pytest的使用
2021/06/07 Python