原生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 window.document的属性、方法和事件小结
Oct 24 Javascript
jQuery中校验时间格式的正则表达式小结
Sep 22 Javascript
JavaScript调用传递变量参数的相关问题及解决办法
Nov 01 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
Dec 30 Javascript
深入理解JS实现快速排序和去重
Oct 17 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
Nov 06 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
Apr 18 Javascript
layui中table表头样式修改方法
Aug 15 Javascript
详解vue中的父子传值双向绑定及数据更新问题
Jun 13 Javascript
vue路由传参三种基本方式详解
Dec 09 Javascript
JavaScript函数Call、Apply原理实例解析
Feb 17 Javascript
vscode 插件开发 + vue的操作方法
Jun 05 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 9 大缓存技术总结
2015/09/17 PHP
PHP模板引擎Smarty内建函数详解
2016/04/11 PHP
yii2高级应用之自定义组件实现全局使用图片上传功能的方法
2016/10/08 PHP
JQuery入门——用映射方式绑定不同事件应用示例
2013/02/05 Javascript
js 控制下拉菜单刷新的方法
2013/03/03 Javascript
实测jquery data()如何存值
2013/08/18 Javascript
Node.js开发指南中的简单实例(mysql版)
2013/09/17 Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
2014/01/10 Javascript
Bootstrap每天必学之轮播(Carousel)插件
2016/04/25 Javascript
JavaScript中常用的验证reg
2016/10/13 Javascript
SVG描边动画
2017/02/23 Javascript
vue-loader教程介绍
2017/06/14 Javascript
javascript 中事件冒泡和事件捕获机制的详解
2017/09/01 Javascript
js中document.write和document.writeln的区别
2018/03/11 Javascript
Vue波纹按钮组件制作
2018/04/30 Javascript
vue-cli3 DllPlugin 提取公用库的方法
2019/04/24 Javascript
vue 解决数组赋值无法渲染在页面的问题
2019/10/28 Javascript
[05:16]《大圣!大圣》——DOTA2新英雄齐天大圣配音李世宏老师专访
2016/12/13 DOTA
Python Tkinter基础控件用法
2014/09/03 Python
Python实现抓取页面上链接的简单爬虫分享
2015/01/21 Python
详解Python中内置的NotImplemented类型的用法
2015/03/31 Python
简单介绍Python中的RSS处理
2015/04/13 Python
使用Python的Flask框架构建大型Web应用程序的结构示例
2016/06/04 Python
python实现监控某个服务 服务崩溃即发送邮件报告
2018/06/21 Python
python 将日期戳(五位数时间)转换为标准时间
2019/07/11 Python
简单了解python 生成器 列表推导式 生成器表达式
2019/08/22 Python
pytorch 使用加载训练好的模型做inference
2020/02/20 Python
美国家居用品和厨具购物网站:DealsDot
2019/10/07 全球购物
如何拷贝一整个Java对象,包括它的状态
2013/12/27 面试题
历史学专业推荐信
2013/11/06 职场文书
孝老爱亲模范事迹
2014/01/24 职场文书
企业总经理岗位职责
2014/02/13 职场文书
解除施工合同协议书
2014/10/17 职场文书
2015中学学校工作总结
2015/07/20 职场文书
让人瞬间清醒的句子,句句经典,字字如金
2019/07/08 职场文书
OpenCV 图像梯度的实现方法
2021/07/25 Python