原生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 使用手册(七)
Sep 23 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
Sep 09 Javascript
JQuery鼠标移到小图显示大图效果的方法
Jun 10 Javascript
解决jQuery uploadify在非IE核心浏览器下无法上传
Aug 05 Javascript
一波JavaScript日期判断脚本分享
Mar 06 Javascript
Angularjs 自定义服务的三种方式(推荐)
Aug 02 Javascript
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
Jul 31 Javascript
说说AngularJS中的$parse和$eval的用法
Sep 14 Javascript
ES6 javascript中class静态方法、属性与实例属性用法示例
Oct 30 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
Mar 13 Javascript
javascript 数组精简技巧小结
Feb 26 Javascript
JS实现密码框效果
Sep 10 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教程之PHP中shell脚本的使用方法分享
2012/02/23 PHP
php实现最简单的MVC框架实例教程
2014/09/08 PHP
新浪SAE搭建PHP项目教程
2015/01/28 PHP
递归实现php数组转xml的代码分享
2015/05/14 PHP
Laravel中错误与异常处理的用法示例
2018/09/16 PHP
jQuery 学习入门篇附实例代码
2010/03/16 Javascript
js输出列表实现代码
2010/09/12 Javascript
实例说明为什么不要行内使用javascript
2014/04/18 Javascript
js隐式全局变量造成的bug示例代码
2014/04/22 Javascript
JavaScript作用域链示例分享
2014/05/27 Javascript
jQuery Timelinr实现垂直水平时间轴插件(附源码下载)
2016/02/16 Javascript
jquery 遍历数组 each 方法详解
2016/05/25 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
2017/02/14 Javascript
Bootstrap常用组件学习(整理)
2017/03/24 Javascript
javascript内存分配原理实例分析
2017/04/10 Javascript
基于JS递归函数细化认识及实用实例(推荐)
2017/08/07 Javascript
Angularjs 手写日历的实现代码(不用插件)
2017/10/18 Javascript
JS中判断某个字符串是否包含另一个字符串的五种方法
2018/05/03 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
2018/08/10 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
2018/09/10 Javascript
解决vuecli3.0热更新失效的问题
2018/09/19 Javascript
vue解决一个方法同时发送多个请求的问题
2018/09/25 Javascript
redux.js详解及基本使用
2019/05/24 Javascript
vue print.js打印支持Echarts图表操作
2020/11/13 Javascript
[02:40]2014DOTA2 国际邀请赛中国区预选赛 四大豪门抵达华西村
2014/05/23 DOTA
django之常用命令详解
2016/06/30 Python
Python中强大的命令行库click入门教程
2016/12/26 Python
Python 常用 PEP8 编码规范详解
2017/01/22 Python
Pandas标记删除重复记录的方法
2018/04/08 Python
如何优雅地处理Django中的favicon.ico图标详解
2018/07/05 Python
Pandas之DataFrame对象的列和索引之间的转化
2019/06/25 Python
django ListView的使用 ListView中获取url中的参数值方式
2020/03/27 Python
HTML5中的postMessage API基本使用教程
2016/05/20 HTML / CSS
开发人员所需要知道的HTML5性能分析面面观
2012/07/05 HTML / CSS
校长寄语大全
2014/04/09 职场文书
男性健康日的活动方案
2014/08/18 职场文书