原生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实例教程(19) 使用HoTMetal(5)
Dec 23 Javascript
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
Jun 08 Javascript
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
Dec 05 Javascript
三种方式获取XMLHttpRequest对象
Apr 21 Javascript
jQuery元素选择器用法实例
Dec 23 Javascript
JavaScript获取指定元素位置的方法
Apr 08 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
Aug 27 Javascript
Node.js制作简单聊天室
Jan 12 Javascript
Vue中父组件向子组件通信的方法
Jul 11 Javascript
ES6中Array.includes()函数的用法
Sep 20 Javascript
对vue.js中this.$emit的深入理解
Feb 23 Javascript
AngularJS实现的自定义过滤器简单示例
Feb 02 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中接口与抽象类的区别
2013/06/08 PHP
PHP动态生成指定大小随机图片的方法
2016/03/25 PHP
全面了解PHP中的全局变量
2016/06/17 PHP
手把手编写PHP框架 深入了解MVC运行流程
2016/09/19 PHP
CI(CodeIgniter)框架实现图片上传的方法
2017/03/24 PHP
PHP基于pdo的数据库操作类【可支持mysql、sqlserver及oracle】
2018/05/21 PHP
javascript下有关dom以及xml节点访问兼容问题
2007/11/26 Javascript
JQuery each打印JS对象的方法
2013/11/13 Javascript
JavaScript实现数据类型的相互转换
2016/03/06 Javascript
Angular.js实现注册系统的实例详解
2016/12/18 Javascript
微信小程序 form组件详解及简单实例
2017/01/10 Javascript
老生常谈ES6中的类
2017/07/31 Javascript
关于jquery中attr()和prop()方法的区别
2018/05/28 jQuery
vue.js与后台数据交互的实例讲解
2018/08/08 Javascript
vue项目上传Github预览的实现示例
2018/11/06 Javascript
nodejs中实现用户注册路由功能
2019/05/20 NodeJs
layui table 获取分页 limit的方法
2019/09/20 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
2020/03/02 Javascript
js面试题之异步问题的深入理解
2020/09/20 Javascript
Python里disconnect UDP套接字的方法
2015/04/23 Python
在Python的Django框架下使用django-tagging的教程
2015/05/30 Python
Python正则表达式使用经典实例
2016/06/21 Python
分享一个简单的python读写文件脚本
2017/11/25 Python
python3+pyqt5+itchat微信定时发送消息的方法
2019/02/20 Python
python多进程并发demo实例解析
2019/12/13 Python
CSS3新属性transition-property transform box-shadow实例学习
2013/06/06 HTML / CSS
CSS3中的@keyframes关键帧动画的选择器绑定
2016/06/13 HTML / CSS
英国豪华家具和家居用品购物网站:Teddy Beau
2020/10/12 全球购物
迟到检讨书300字
2014/02/14 职场文书
关于清明节的演讲稿
2014/09/13 职场文书
上班迟到检讨书
2014/09/15 职场文书
2014年祖国生日寄语
2014/09/19 职场文书
2015年简历自我评价范文
2015/03/11 职场文书
SpringBoot快速入门详解
2021/07/21 Java/Android
TV动画《八十龟酱观察日记》第四季宣传PV公布
2022/04/06 日漫
通过feDisplacementMap和feImage实现水波特效
2022/04/24 HTML / CSS