原生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 相关文章推荐
js清理Word格式示例代码
Feb 13 Javascript
jquery访问ashx文件示例代码
Aug 11 Javascript
javascript实现禁止复制网页内容
Dec 16 Javascript
Node.js事件驱动
Jun 18 Javascript
js实现仿网易点击弹出提示同时背景变暗效果
Aug 13 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
Dec 03 Javascript
第七章之菜单按钮图标组件
Apr 25 Javascript
详解升级react-router 4 踩坑指南
Aug 14 Javascript
vue-content-loader内容加载器的使用方法
Aug 05 Javascript
原生js检测页面加载完毕的实例
Sep 11 Javascript
vue接入腾讯防水墙代码
May 07 Javascript
js实现圆形显示鼠标单击位置
Feb 11 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 图片上传代码
2011/09/13 PHP
PHP接收json 并将接收数据插入数据库的实现代码
2015/12/01 PHP
php 替换文章中的图片路径,下载图片到本地服务器的方法
2018/02/06 PHP
TP5框架实现一次选择多张图片并预览的方法示例
2020/04/04 PHP
可自己添加html的伪弹出框实现代码
2013/09/08 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
2015/11/30 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
2016/05/19 Javascript
jQuery实现select模糊查询(反射机制)
2017/01/14 Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
2017/02/18 Javascript
Webpack中css-loader和less-loader的使用教程
2017/04/27 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
2017/06/15 Javascript
javascript+css3开发打气球小游戏完整代码
2017/11/28 Javascript
AngularJS模态框模板ngDialog的使用详解
2018/05/11 Javascript
使用vue-router完成简单导航功能【推荐】
2018/06/28 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
2018/08/31 Javascript
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
2018/11/05 Javascript
[03:53]2016国际邀请赛中国区预选赛第三日TOP10精彩集锦
2016/06/29 DOTA
详解Python操作RabbitMQ服务器消息队列的远程结果返回
2016/06/30 Python
Python实现的微信公众号群发图片与文本消息功能实例详解
2017/06/30 Python
Python装饰器用法实例总结
2018/02/07 Python
详解python的ORM中Pony用法
2018/02/09 Python
pycharm运行程序时看不到任何结果显示的解决
2020/02/21 Python
Python+Xlwings 删除Excel的行和列
2020/12/19 Python
python uuid生成唯一id或str的最简单案例
2021/01/13 Python
HTML5页面音视频在微信和app下自动播放的实现方法
2016/10/20 HTML / CSS
Links of London官方网站:英国标志性的珠宝品牌
2017/04/09 全球购物
联想加拿大官方网站:Lenovo Canada
2018/04/05 全球购物
介绍一下linux文件系统分配策略
2012/11/17 面试题
采购人员的个人自我评价
2014/01/16 职场文书
区政府领导班子个人对照检查材料
2014/09/25 职场文书
学生评语集锦
2015/01/04 职场文书
被告代理词范文
2015/05/25 职场文书
2015年法律事务部工作总结
2015/07/27 职场文书
Python Pandas 删除列操作
2022/03/16 Python
带你了解Java中的ForkJoin
2022/04/28 Java/Android
win10系统计算机图标怎么调出来?win10调出计算机图标的方法
2022/08/14 数码科技