原生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 相关文章推荐
关于IFRAME 自适应高度的研究
Jul 20 Javascript
关于javascript中的parseInt使用技巧
Sep 03 Javascript
基于iframe实现类似于ajax的页面无刷新
May 31 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
Sep 10 Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
Mar 11 Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
May 27 Javascript
js实现可旋转的立方体模型
Oct 16 Javascript
微信小程序开发一键登录 获取session_key和openid实例
Nov 23 Javascript
TableSort.js表格排序插件使用方法详解
Feb 10 Javascript
关于使用js算总价的问题
Jun 23 Javascript
Vue侦测相关api的实现方法
May 22 Javascript
微信小程序实现图片压缩
Dec 03 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
JS中encodeURIComponent函数用php解码的代码
2012/03/01 PHP
深入php数据采集的详解
2013/06/02 PHP
Jquery插件之多图片异步上传
2010/10/20 Javascript
由Javascript实现的页面日历
2011/11/04 Javascript
jquery 事件冒泡的介绍以及如何阻止事件冒泡
2012/12/25 Javascript
Extjs4 类的定义和扩展实例
2013/06/28 Javascript
为指定的元素添加遮罩层的示例代码
2014/01/15 Javascript
Javascript的闭包详解
2014/12/26 Javascript
使用angularjs创建简单表格
2016/01/21 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
2016/10/13 Javascript
JavaScript切换搜索引擎的导航网页搜索框实例代码
2017/06/11 Javascript
Vue2.0中集成UEditor富文本编辑器的方法
2018/03/03 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
2019/02/17 Javascript
JS数组方法slice()用法实例分析
2020/01/18 Javascript
[01:45]2014DOTA2 TI预选赛预选赛 大神专访第二弹!
2014/05/20 DOTA
Python制作钉钉加密/解密工具
2016/12/07 Python
200行自定义python异步非阻塞Web框架
2017/03/15 Python
详解如何使用Python编写vim插件
2017/11/28 Python
python 实现UTC时间加减的方法
2018/12/31 Python
python实现对象列表根据某个属性排序的方法详解
2019/06/11 Python
pytorch中的embedding词向量的使用方法
2019/08/18 Python
Python猜数字算法题详解
2020/03/01 Python
Python 分布式缓存之Reids数据类型操作详解
2020/06/24 Python
Python操作PostgreSql数据库的方法(基本的增删改查)
2020/12/29 Python
特步官方商城:Xtep
2017/03/21 全球购物
党员廉洁自律承诺书
2014/05/26 职场文书
大学奖学金获奖感言
2014/08/15 职场文书
农业生产宣传标语
2014/10/08 职场文书
质量保证书
2015/01/17 职场文书
教师求职信怎么写
2015/03/20 职场文书
工作时间证明
2015/06/15 职场文书
技能培训通讯稿
2015/07/18 职场文书
大学生村官工作心得体会
2016/01/23 职场文书
2016年小学感恩节活动总结
2016/04/01 职场文书
python实现腾讯滑块验证码识别
2021/04/27 Python
使用python+pygame开发消消乐游戏附完整源码
2021/06/10 Python