原生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 相关文章推荐
javascript DOM编程实例(智播客学习)
Nov 23 Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
Feb 12 Javascript
javascript复制粘贴与clipboardData的使用
Oct 16 Javascript
js获取数组的最后一个元素
Apr 14 Javascript
js中unicode转码方法详解
Oct 09 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
Sep 08 Javascript
老生常谈Javascript中的原型和this指针
Oct 09 Javascript
js 数据存储和DOM编程
Feb 09 Javascript
AngularJS  ng-repeat遍历输出的用法
Jun 19 Javascript
详解小程序如何避免多次点击,重复触发事件
Apr 08 Javascript
如何优雅地在Node应用中进行错误异常处理
Nov 25 Javascript
js实现有趣的倒计时效果
Jan 19 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
一个简单的PHP投票程序源码
2007/03/11 PHP
WebQQ最新登陆协议的用法
2014/12/22 PHP
thinkPHP3.1验证码的简单实现方法
2016/04/22 PHP
一起来写段JS drag拖动代码
2010/12/09 Javascript
如何确保JavaScript的执行顺序 之实战篇
2011/03/03 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
2013/12/04 Javascript
js实现可键盘控制的简单抽奖程序
2016/07/13 Javascript
vue2.0实战之基础入门(1)
2017/03/27 Javascript
Vue使用NPM方式搭建项目
2018/10/25 Javascript
详解JavaScript函数callee、call、apply的区别
2019/03/08 Javascript
解决vue-cli webpack打包开启Gzip 报错问题
2019/07/24 Javascript
JavaScript canvas实现跟随鼠标事件
2020/02/10 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
2020/04/21 Javascript
通过angular CDK实现页面元素拖放的步骤详解
2020/07/01 Javascript
原生JS实现拖拽功能
2020/12/16 Javascript
Windows中安装使用Virtualenv来创建独立Python环境
2016/05/31 Python
详解如何在python中读写和存储matlab的数据文件(*.mat)
2018/02/24 Python
python实现一个简单的并查集的示例代码
2018/03/19 Python
python matplotlib 在指定的两个点之间连线方法
2018/05/25 Python
Django 使用easy_thumbnails压缩上传的图片方法
2019/07/26 Python
python多任务之协程的使用详解
2019/08/26 Python
python动态视频下载器的实现方法
2019/09/16 Python
使用python远程操作linux过程解析
2019/12/04 Python
python中with语句结合上下文管理器操作详解
2019/12/19 Python
python定义类self用法实例解析
2020/01/22 Python
解决Django提交表单报错:CSRF token missing or incorrect的问题
2020/03/13 Python
tensorflow常用函数API介绍
2020/04/19 Python
python中selenium库的基本使用详解
2020/07/31 Python
Python入门基础之数字字符串与列表
2021/02/01 Python
用CSS3实现无限循环的无缝滚动的示例代码
2017/11/01 HTML / CSS
全球最大运动品牌的男装、女装和童装官方库存商:A&A Sports
2021/01/17 全球购物
维稳工作情况汇报
2014/10/27 职场文书
2015年重阳节慰问信
2015/03/23 职场文书
信贷客户经理岗位职责
2015/04/09 职场文书
巾帼建功标兵先进事迹材料
2016/02/29 职场文书
职工趣味运动会开幕词
2016/03/04 职场文书