原生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 相关文章推荐
JS 自定义函数缺省值的设置方法
May 05 Javascript
JavaScript 实现鼠标拖动元素实例代码
Feb 24 Javascript
bootstrap table分页模板和获取表中的ID方法
Jan 10 Javascript
ReactNative短信验证码倒计时控件的实现代码
Jul 20 Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
Mar 28 Javascript
JavaScript 中的 this 工作原理
Jun 20 Javascript
Vue使用vue-area-linkage实现地址三级联动效果的示例
Jun 27 Javascript
vue踩坑记-在项目中安装依赖模块npm install报错
Apr 02 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
Jun 17 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
Feb 11 Javascript
关于vue属性使用和不使用冒号的区别说明
Oct 22 Javascript
ant design vue datepicker日期选择器中文化操作
Oct 28 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
114啦源码(114la)不能生成地方房产和地方报刊问题4级页面0字节的解决方法
2012/01/12 PHP
利用PHP命令行模式采集股票趋势信息
2016/08/09 PHP
使用laravel的migrate创建数据表的方法
2019/09/30 PHP
PHP实用小技巧之调用录像的方法
2019/12/05 PHP
List the Stored Procedures in a SQL Server database
2007/06/20 Javascript
表单元素的submit()方法和onsubmit事件应用概述
2013/02/01 Javascript
jQuery动态创建html元素的常用方法汇总
2014/09/05 Javascript
删除Javascript Object中间的key
2014/11/18 Javascript
jQuery中position()方法用法实例
2015/01/16 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
2015/08/13 Javascript
jquery插件ajaxupload实现文件上传操作
2015/12/09 Javascript
JavaScript中数组去除重复的三种方法
2016/04/22 Javascript
javascript css红色经典选项卡效果实现代码
2016/05/17 Javascript
AngularJS 单元测试(二)详解
2016/09/21 Javascript
Vue项目分环境打包的实现步骤
2018/04/02 Javascript
使用angularjs.foreach时return的问题解决
2018/09/30 Javascript
nodejs中方法和模块用法示例
2018/12/24 NodeJs
浅谈JS中this在各个场景下的指向
2019/08/14 Javascript
原生js实现简单轮播图
2020/10/26 Javascript
python生成随机验证码(中文验证码)示例
2014/04/03 Python
全面解读Python Web开发框架Django
2014/06/30 Python
详解Django中Request对象的相关用法
2015/07/17 Python
Python探索之实现一个简单的HTTP服务器
2017/10/28 Python
Python实现的FTP通信客户端与服务器端功能示例
2018/03/28 Python
python实现list由于numpy array的转换
2018/04/04 Python
Python 运行.py文件和交互式运行代码的区别详解
2019/07/02 Python
Python实现代码统计工具
2019/09/19 Python
Python实现大数据收集至excel的思路详解
2020/01/03 Python
意大利大型购物中心:Oliviero.it
2017/10/19 全球购物
德国童装购物网站:NICKI´S.com
2018/04/20 全球购物
美德好少年事迹材料
2014/01/19 职场文书
家长给小学生的评语
2014/01/30 职场文书
老师的检讨书
2014/02/23 职场文书
赔偿协议书范本
2014/09/12 职场文书
十岁生日答谢词
2015/01/05 职场文书
2019数学教师下学期工作总结
2019/06/27 职场文书