原生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记住用户名和密码的具体实现
Apr 04 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
Apr 07 Javascript
深入理解JavaScript编程中的原型概念
Jun 25 Javascript
JS实现选中当前菜单后高亮显示的导航条效果
Oct 15 Javascript
jQuery实现ctrl+enter(回车)提交表单
Oct 19 Javascript
jQuery插件ajaxfileupload.js实现上传文件
Oct 23 Javascript
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
JavaScript面向对象的程序设计(犯迷糊的小羊)
May 27 Javascript
Vue实现移动端左右滑动效果的方法
Nov 27 Javascript
Flutter实现仿微信底部菜单栏功能
Sep 18 Javascript
Angular value与ngValue区别详解
Nov 27 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
Dec 04 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中使用localhost连接Mysql不成功的解决方法
2014/08/20 PHP
php实现MySQL数据库备份与还原类实例
2014/12/09 PHP
解决出现SoapFault (looks like we got no XML document)的问题
2017/06/24 PHP
动态修改DOM 里面的 id 属性的弊端分析
2008/09/03 Javascript
NodeJS中利用Promise来封装异步函数
2015/02/25 NodeJs
javascript实现支持移动设备画廊
2015/08/24 Javascript
javascript数组常用方法汇总
2016/09/10 Javascript
jQuery手指滑动轮播效果
2016/12/22 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
2017/03/02 Javascript
微信小程序 合法域名校验出错详解及解决办法
2017/03/09 Javascript
Angular.js组件之input mask对input输入进行格式化详解
2017/07/10 Javascript
关于在mongoose中填充外键的方法详解
2017/08/14 Javascript
vue cli3 配置proxy代理无效的解决
2019/10/30 Javascript
vue之延时刷新实例
2019/11/14 Javascript
JS实现横向轮播图(初级版)
2020/06/24 Javascript
[57:37]EG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[01:08:29]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第一场 1月9日
2021/03/11 DOTA
Python中字符串对齐方法介绍
2015/05/21 Python
Python引用类型和值类型的区别与使用解析
2017/10/17 Python
从头学Python之编写可执行的.py文件
2017/11/28 Python
每天迁移MySQL历史数据到历史库Python脚本
2018/04/13 Python
python腾讯语音合成实现过程解析
2019/08/01 Python
flask 实现token机制的示例代码
2019/11/07 Python
python统计字符的个数代码实例
2020/02/07 Python
在python中实现求输出1-3+5-7+9-......101的和
2020/04/02 Python
使用Keras中的ImageDataGenerator进行批次读图方式
2020/06/17 Python
基于DOM+CSS3实现OrgChart组织结构图插件
2016/03/02 HTML / CSS
MANGO官方网站:西班牙芒果服装品牌
2017/01/15 全球购物
高级3D打印市场:Gambody
2019/12/26 全球购物
什么是规则表达式
2012/05/03 面试题
经济信息系毕业生自荐信
2014/06/02 职场文书
行政秘书工作自我鉴定
2014/09/15 职场文书
小学生法制教育心得体会
2016/01/14 职场文书
Redis高级数据类型Hyperloglog、Bitmap的使用
2021/05/24 Redis
Java常用工具类汇总 附示例代码
2021/06/26 Java/Android
【海涛七七解说】DCG第二周:DK VS 天禄
2022/04/01 DOTA