原生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 vvorld 在线加密破解方法
Nov 13 Javascript
JS清空多文本框、文本域示例代码
Feb 24 Javascript
jQuery 隐藏和显示 input 默认值示例
Jun 03 Javascript
js中函数调用的两种常用方法使用介绍
Jul 17 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
Sep 10 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
Aug 05 Javascript
JS全角与半角转化实例(分享)
Jul 04 Javascript
angular2+node.js express打包部署的实战
Jul 27 Javascript
原生js+css调节音量滑块
Jan 15 Javascript
JS面向对象编程基础篇(二) 封装操作实例详解
Mar 03 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
Mar 17 Javascript
RxJS在TypeScript中的简单使用详解
Apr 13 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用户指南-cookies部分
2006/10/09 PHP
php is_file()和is_dir()用于遍历目录时用法注意事项
2010/03/02 PHP
php模板原理讲解
2013/11/13 PHP
Yii中的relations数据关联查询及统计功能用法详解
2016/07/14 PHP
用PHP将Unicode 转化为UTF-8的实现方法(推荐)
2017/02/08 PHP
Linux基于php-fpm模式的lamp搭建phpmyadmin的方法
2018/10/25 PHP
javascript mouseover、mouseout停止事件冒泡的解决方案
2009/04/07 Javascript
js实现简单的省市县三级联动效果实例
2016/02/18 Javascript
javascript 开发之百度地图使用到的js函数整理
2017/05/19 Javascript
微信小程序实现弹出菜单
2018/07/19 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
2020/03/17 Javascript
react的hooks的用法详解
2020/10/12 Javascript
pyqt4教程之widget使用示例分享
2014/03/07 Python
python实现斐波那契递归函数的方法
2014/09/08 Python
Python中的类学习笔记
2014/09/23 Python
python通过字典dict判断指定键值是否存在的方法
2015/03/21 Python
Python中不同进制互相转换(二进制、八进制、十进制和十六进制)
2015/04/05 Python
使用Python构建Hopfield网络的教程
2015/04/14 Python
Python3.x对JSON的一些操作示例
2017/09/01 Python
python实现对指定字符串补足固定长度倍数截断输出的方法
2018/11/15 Python
python反编译学习之字节码详解
2019/05/19 Python
Django1.11配合uni-app发起微信支付的实现
2019/10/12 Python
python 遍历pd.Series的index和value
2019/11/26 Python
python numpy 反转 reverse示例
2019/12/04 Python
Python Numpy,mask图像的生成详解
2020/02/19 Python
CSS3中的Transition过度与Animation动画属性使用要点
2016/05/20 HTML / CSS
纯CSS3制作页面切换效果的实例代码
2019/05/30 HTML / CSS
园林施工员岗位职责
2013/12/11 职场文书
农村党支部先进事迹
2014/01/14 职场文书
秋季红领巾广播稿
2014/01/27 职场文书
聊城大学毕业生自荐书
2014/02/01 职场文书
C++程序员求职信范文
2014/04/14 职场文书
2015年招聘工作总结
2014/12/12 职场文书
先进个人事迹材料
2014/12/29 职场文书
员工辞职信怎么写
2015/02/27 职场文书
Windows server 2012搭建FTP服务器
2022/04/29 Servers