原生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插件Tabs实现过程
Jul 06 Javascript
点击页面其它地方隐藏该div的两种思路
Nov 18 Javascript
判断某个字符在一个字符串中是否存在的js代码
Feb 28 Javascript
jQuery.position()方法获取不到值的安全替换方法
Mar 13 Javascript
JavaScript与java语言有什么不同
Sep 22 Javascript
在点击div中的p时,如何阻止事件冒泡
Feb 07 Javascript
Bootstrap3 模态框使用实例
Feb 22 Javascript
Node接收电子邮件的实例代码
Jul 21 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
Mar 29 Javascript
小程序云开发部署攻略(图文教程)
Oct 30 Javascript
对layer弹出框中icon数字参数的说明介绍
Sep 04 Javascript
p5.js绘制旋转的正方形
Oct 23 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中的日期处理方法集锦
2007/01/02 PHP
ThinkPHP之用户注册登录留言完整实例
2014/07/22 PHP
PHP封装返回Ajax字符串和JSON数组的方法
2017/02/17 PHP
php之可变函数的实例详解
2017/09/13 PHP
PHP应用跨时区功能的实现方法
2019/03/21 PHP
Laravel实现批量更新多条数据
2020/04/06 PHP
ext实现完整的登录代码
2008/08/08 Javascript
菜鸟javascript基础整理1
2010/12/06 Javascript
基于Jquery插件开发之图片放大镜效果(仿淘宝)
2011/11/19 Javascript
基于jquery的鼠标拖动效果代码
2012/05/30 Javascript
JavaScript中九种常用排序算法
2014/09/02 Javascript
Javascript数组与字典用法分析
2014/12/13 Javascript
JavaScript常用脚本汇总(三)
2015/03/04 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
2015/09/09 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
2016/09/28 Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
2016/12/02 Javascript
JS数组去重(4种方法)
2017/03/27 Javascript
如何使用JavaScript实现栈与队列
2019/06/24 Javascript
使用vue制作滑动标签
2019/09/21 Javascript
Vue-Cli项目优化操作的实现
2019/10/27 Javascript
JavaScript实现tab栏切换效果
2020/03/16 Javascript
分享一下Python 开发者节省时间的10个方法
2015/10/02 Python
python使用selenium实现批量文件下载
2019/03/11 Python
python PIL和CV对 图片的读取,显示,裁剪,保存实现方法
2019/08/07 Python
Python使用百度翻译开发平台实现英文翻译为中文功能示例
2019/08/08 Python
mac使用python识别图形验证码功能
2020/01/10 Python
python解包用法详解
2021/02/17 Python
针对HTML5的Web Worker使用攻略
2015/07/12 HTML / CSS
使用HTML5中的contentEditable来将多行文本自动增高
2016/03/01 HTML / CSS
全球最大的户外用品零售商之一:The House
2018/06/12 全球购物
企业管理专业个人求职信范文
2013/09/24 职场文书
四年大学自我鉴定
2014/02/17 职场文书
社区六一儿童节活动总结
2015/02/11 职场文书
全陪导游词开场白
2015/05/29 职场文书
大学军训心得体会800字
2016/01/11 职场文书
Java 超详细讲解IO操作字节流与字符流
2022/03/25 Java/Android