原生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 1.0.2
Oct 11 Javascript
JavaScript XML和string相互转化实现代码
Jul 04 Javascript
js中eval()函数和trim()去掉字符串左右空格应用
Feb 02 Javascript
JavaScript立即执行函数的三种不同写法
Sep 05 Javascript
JS原型链怎么理解
Jun 27 Javascript
轻松掌握JavaScript策略模式
Aug 25 Javascript
Bootstrap模态框调用功能实现方法
Sep 19 Javascript
js控制台输出的方法(详解)
Nov 26 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
Dec 28 Javascript
layui 上传文件_批量导入数据UI的方法
Sep 23 Javascript
(开源)微信小程序+mqtt,esp8266温湿度读取
Apr 02 Javascript
详解如何使用Node.js实现热重载页面
May 06 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/11/12 PHP
php数组编码转换示例详解
2014/03/11 PHP
PHP中的output_buffering详细介绍
2014/09/27 PHP
PHP 7.1中AES加解密方法mcrypt_module_open()的替换方案
2017/10/17 PHP
Laravel 框架返回状态拦截代码
2019/10/18 PHP
从javascript语言本身谈项目实战
2006/12/27 Javascript
拥抱模块化的JavaScript
2012/03/07 Javascript
JS特殊函数(Function()构造函数、函数直接量)区别介绍
2013/05/19 Javascript
JS逆序遍历实现代码
2014/12/02 Javascript
PHP+jQuery+Ajax实现多图片上传效果
2015/03/14 Javascript
jQuery实现的向下图文信息滚动效果
2015/05/03 Javascript
windows下安装nodejs及框架express
2015/08/07 NodeJs
在jQuery中处理XML数据的大致方法
2015/08/14 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
2016/02/15 Javascript
jQuery事件绑定方法学习总结(推荐)
2016/11/21 Javascript
JavaScript实现经典排序算法之插入排序
2016/12/28 Javascript
JS实现的随机排序功能算法示例
2017/06/09 Javascript
Vue按需加载的具体实现
2017/12/02 Javascript
利用CDN加速react webpack打包后的文件详解
2018/02/22 Javascript
webpack4.0打包优化策略整理小结
2018/03/30 Javascript
js合并两个数组生成合并后的key:value数组
2018/05/09 Javascript
JS与SQL方式随机生成高强度密码示例
2018/12/29 Javascript
Vue-cli4 配置 element-ui 按需引入操作
2020/09/11 Javascript
[03:58]兄弟们,回来开黑了!DOTA2昔日战友招募宣传视频
2016/07/17 DOTA
Python中__new__与__init__方法的区别详解
2015/05/04 Python
python使用xmlrpclib模块实现对百度google的ping功能
2015/06/02 Python
Python基于numpy灵活定义神经网络结构的方法
2017/08/19 Python
TensorFlow实现Softmax回归模型
2018/03/09 Python
python smtplib模块自动收发邮件功能(一)
2018/05/22 Python
解决pycharm 远程调试 上传 helpers 卡住的问题
2019/06/27 Python
Python实现剪刀石头布小游戏(与电脑对战)
2019/12/31 Python
美国领先的礼品卡网站:GiftCards.com
2016/11/02 全球购物
DC Shoes荷兰官方网站:美国极限运动品牌
2019/10/22 全球购物
Wiggle新西兰:自行车、跑步、游泳
2020/05/06 全球购物
刑事辩护词范文
2015/05/21 职场文书
初中地理教学反思
2016/02/19 职场文书