原生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 + Flex 通过拖拽方式动态改变图片的代码
Aug 03 Javascript
jquery随机展示头像代码
Dec 21 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
Oct 20 Javascript
bootstrap table 服务器端分页例子分享
Feb 10 Javascript
JavaScript动态改变div属性的实现方法
Jul 22 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
Jul 19 Javascript
axios拦截设置和错误处理方法
Mar 05 Javascript
JS限制输入框输入的实现代码
Jul 02 Javascript
element-ui使用导航栏跳转路由的用法详解
Aug 22 Javascript
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
浅谈vant组件Picker 选择器选单选问题
Nov 04 Javascript
vue实现input输入模糊查询的三种方式
Aug 14 Vue.js
微信小程序接入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中static,const与define的使用区别
2013/06/18 PHP
给WordPress中的留言加上楼层号的PHP代码实例
2015/12/14 PHP
简单的php购物车代码
2020/06/05 PHP
用JavaScript调用WebService的示例
2008/04/07 Javascript
JavaScript的document对象和window对象详解
2010/12/30 Javascript
电子商务网站上的常用的js放大镜效果
2011/12/08 Javascript
JS实现点击链接取消跳转效果的方法
2014/01/24 Javascript
jquery动态更换设置背景图的方法
2014/03/25 Javascript
使用forever管理nodejs应用教程
2014/06/03 NodeJs
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
2015/08/26 Javascript
Javascript中Date类型和Math类型详解
2016/02/27 Javascript
JS转换HTML转义符的方法
2016/08/24 Javascript
nodejs微信公众号支付开发
2016/09/19 NodeJs
Angular.js中定时器循环的3种方法总结
2017/04/27 Javascript
jquery操作ul的一些操作笔记整理(干货)
2017/08/31 jQuery
使用vue-aplayer插件时出现的问题的解决
2018/03/02 Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
2018/09/27 Javascript
ES6入门教程之变量的解构赋值详解
2019/04/13 Javascript
详解Vue-cli3.X使用px2rem遇到的问题
2019/08/09 Javascript
js实现浏览器打印功能的示例代码
2020/07/15 Javascript
vue:el-input输入时限制输入的类型操作
2020/08/05 Javascript
js实现拖拽与碰撞检测
2020/09/18 Javascript
[01:35]2018完美盛典章节片——共竞
2018/12/17 DOTA
Python将xml和xsl转换为html的方法
2015/03/10 Python
Python脚本实现虾米网签到功能
2016/04/12 Python
Windows下安装python2和python3多版本教程
2017/03/30 Python
Python接口开发实现步骤详解
2020/04/26 Python
应届生自荐信范文
2014/02/21 职场文书
2014机关干部学习“焦裕禄精神”思想汇报
2014/09/19 职场文书
民政局个人整改措施
2014/09/24 职场文书
建筑工地文明标语
2014/10/09 职场文书
初一年级组工作总结
2015/08/12 职场文书
咖啡厅里的创业计划书
2019/08/21 职场文书
创业计划书之暑假培训班
2019/11/09 职场文书
新手入门Jvm-- JVM对象创建与内存分配机制
2021/06/18 Java/Android
一篇文章带你学习Mybatis-Plus(新手入门)
2021/08/02 Java/Android