原生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 节点操作 以及DOMDocument属性和方法
Dec 06 Javascript
jquery 元素相对定位代码
Oct 15 Javascript
点击标签切换和自动切换DIV选项卡
Aug 10 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
Sep 24 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
Oct 17 Javascript
浅谈javascript构造函数与实例化对象
Jun 22 Javascript
函数window.open实现关闭所有的子窗口
Aug 03 Javascript
纯css实现窗户玻璃雨滴逼真效果
Aug 23 Javascript
JavaScript如何实现跨域请求
Aug 05 Javascript
原生js实现放大镜
Feb 20 Javascript
js实现3D照片墙效果
Oct 28 Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
Nov 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利用cookie实现访问次数统计代码
2011/05/19 PHP
PHP中的错误处理、异常处理机制分析
2012/05/07 PHP
php中sql注入漏洞示例 sql注入漏洞修复
2014/01/24 PHP
PHP中strtr字符串替换用法详解
2014/11/26 PHP
PHP的中使用非缓冲模式查询数据库的方法
2017/02/05 PHP
ExtJS 2.0实用简明教程之应用ExtJS
2009/04/29 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
2014/06/05 Javascript
jQuery中ajax和post处理json的不同示例对比
2014/11/02 Javascript
node.js中的fs.futimesSync方法使用说明
2014/12/17 Javascript
javascript白色简洁计算器
2015/05/04 Javascript
jQuery满意度星级评价插件特效代码分享
2015/08/19 Javascript
学习JavaScript事件流和事件处理程序
2016/01/25 Javascript
JavaScript tab选项卡插件实例代码
2016/02/23 Javascript
JavaScript之Date_动力节点Java学院整理
2017/06/28 Javascript
JavaScript高阶函数_动力节点Java学院整理
2017/06/28 Javascript
浅谈sass在vue注意的地方
2017/08/10 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)
2019/01/23 Javascript
Python Queue模块详解
2014/11/30 Python
python检测某个变量是否有定义的方法
2015/05/20 Python
Python+MongoDB自增键值的简单实现
2016/11/04 Python
使用Python的Django和layim实现即时通讯的方法
2018/05/25 Python
Python使用pymongo模块操作MongoDB的方法示例
2018/07/20 Python
浅谈keras通过model.fit_generator训练模型(节省内存)
2020/06/17 Python
Pycharm-community-2020.2.3 社区版安装教程图文详解
2020/12/08 Python
FC-Moto西班牙:摩托车手最大的购物场所之一
2019/04/11 全球购物
限量版运动鞋和街头服饰:TheDrop
2020/09/06 全球购物
国际会议邀请函范文
2014/01/16 职场文书
幼儿园优秀教师事迹
2014/02/13 职场文书
2014年大班元旦活动方案
2014/02/26 职场文书
小学生学雷锋演讲稿
2014/04/25 职场文书
战略合作意向书
2014/07/29 职场文书
派出所班子党的群众路线对照检查材料思想汇报
2014/10/01 职场文书
幼儿园教师个人总结
2015/02/05 职场文书
2015年社区科普工作总结
2015/05/13 职场文书
暑期社会实践新闻稿
2015/07/17 职场文书
文案策划岗位个人自我评价(范文)
2019/08/08 职场文书