原生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 相关文章推荐
jQuery .tmpl(), .template()学习资料小结
Jul 18 Javascript
javascript错误的认识不用关心内存管理
Dec 15 Javascript
JavaScript学习笔记之基础语法
Jan 22 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
Oct 15 Javascript
Bootstrap每天必学之栅格系统(布局)
Nov 25 Javascript
APP中javascript+css3实现下拉刷新效果
Jan 27 Javascript
node使用Koa2搭建web项目的方法
Oct 17 Javascript
Webpack path与publicPath的区别详解
May 03 Javascript
JavaScript 点击触发复制功能实例详解
Nov 02 Javascript
Vue 框架之键盘事件、健值修饰符、双向数据绑定
Nov 14 Javascript
Vue 使用beforeEach实现登录状态检查功能
Oct 31 Javascript
vue自定义树状结构图的实现方法
Oct 18 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实现将wav文件转换成图像文件并在页面中显示的方法
2015/04/21 PHP
PHP编写RESTful接口
2016/02/23 PHP
PHP实现对xml的增删改查操作案例分析
2017/05/19 PHP
PHP数据分析引擎计算余弦相似度算法示例
2017/08/08 PHP
针对PHP开发安全问题的相关总结
2019/03/22 PHP
php无限极分类实现方法分析
2019/07/04 PHP
PHP7数组的底层实现示例
2019/08/25 PHP
解决在laravel中leftjoin带条件查询没有返回右表为NULL的问题
2019/10/15 PHP
js兼容标准的表格变色效果
2008/06/28 Javascript
Javascript中的变量使用说明
2010/05/18 Javascript
css结合js制作下拉菜单示例代码
2014/02/27 Javascript
JQuery插入DOM节点的方法
2015/06/11 Javascript
JQuery.Ajax()的data参数类型实例详解
2015/11/20 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
2016/10/11 Javascript
JS 获取文件后缀,判断文件类型(比如是否为图片格式)
2020/05/09 Javascript
使用vue引入maptalks地图及聚合效果的实现
2020/08/10 Javascript
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
2020/09/01 Javascript
python字符串Intern机制详解
2019/07/01 Python
手写一个python迭代器过程详解
2019/08/27 Python
决策树剪枝算法的python实现方法详解
2019/09/18 Python
Django将默认的SQLite更换为MySQL的实现
2019/11/18 Python
Python 中如何实现参数化测试的方法示例
2019/12/10 Python
django框架基于queryset和双下划线的跨表查询操作详解
2019/12/11 Python
生产副总岗位职责
2013/11/28 职场文书
小学教师评语大全
2014/04/23 职场文书
空气环保标语
2014/06/12 职场文书
乡镇党员干部四风对照检查材料思想汇报
2014/09/27 职场文书
2014年英语教师工作总结
2014/12/03 职场文书
护士求职自荐信范文
2015/03/04 职场文书
部门优秀员工推荐信
2015/03/24 职场文书
2015年班主任个人工作总结
2015/03/31 职场文书
2016元旦主持人开场白
2015/12/03 职场文书
php+laravel 扫码二维码签到功能
2021/05/15 PHP
dubbo服务整合zipkin详解
2021/07/26 Java/Android
SpringBoot+VUE实现数据表格的实战
2021/08/02 Java/Android
javascript的var与let,const之间的区别详解
2022/02/18 Javascript