原生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 相关文章推荐
让广告代码不再影响你的网页加载速度
Jul 07 Javascript
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
Oct 31 Javascript
javascript获取xml节点的最大值(实现代码)
Dec 11 Javascript
flash遮住div问题的正确解决方法
Feb 27 Javascript
jquery实现表单输入时提示文字滑动向上效果
Aug 10 Javascript
jQuery实现ctrl+enter(回车)提交表单
Oct 19 Javascript
JS+JSP通过img标签调用实现静态页面访问次数统计的方法
Dec 14 Javascript
React简单介绍
May 24 Javascript
解读ES6中class关键字
Nov 20 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
Apr 02 Javascript
什么时候不能在 Node.js 中使用 Lock Files
Jun 24 Javascript
Ant Design Pro 下实现文件下载的实现代码
Dec 03 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
TP3.2.3框架使用CKeditor编辑器在页面中上传图片的方法分析
2019/12/31 PHP
PHP的重载使用魔术方法代码实例详解
2021/02/26 PHP
用js计算页面执行时间的函数
2006/12/07 Javascript
JAVASCRIPT  THIS详解 面向对象
2009/03/25 Javascript
JavaScript.The.Good.Parts阅读笔记(二)作用域&amp;闭包&amp;减缓全局空间污染
2010/11/16 Javascript
jQuery弹出(alert)select选择的值
2013/04/21 Javascript
js和jquery对dom节点的操作(创建/追加)
2013/04/21 Javascript
jQuery阻止事件冒泡具体实现
2013/10/11 Javascript
javascript无刷新评论实现方法
2015/05/13 Javascript
Javascript中的Prototype到底是什么
2016/02/16 Javascript
vue的props实现子组件随父组件一起变化
2016/10/27 Javascript
JS实现简单抖动效果
2017/06/01 Javascript
ES6学习教程之Map的常用方法总结
2017/08/03 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
2017/12/27 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
2019/07/18 Javascript
Typescript的三种运行方式(小结)
2019/09/18 Javascript
利用layer实现表单完美验证的方法
2019/09/26 Javascript
[12:29]《一刀刀一天》之DOTA全时刻19:蝙蝠骑士田伯光再度不举
2014/06/10 DOTA
在Python中使用defaultdict初始化字典以及应用方法
2018/10/31 Python
Python脚本按照当前日期创建多级目录
2019/03/01 Python
python能否java成为主流语言吗
2020/06/22 Python
python二维图制作的实例代码
2020/12/03 Python
Pandas之缺失数据的实现
2021/01/06 Python
Expedia马来西亚旅游网站:廉价酒店,度假村和航班预订
2016/07/26 全球购物
美国第一个网上卖鞋零售商:OnlineShoes.com
2017/09/24 全球购物
加拿大最大的钻石商店:Peoples Jewellers
2018/01/01 全球购物
运动鞋、足球鞋和慕尼黑球衣:Sport Münzinger
2019/08/26 全球购物
智能室内花园:Click & Grow
2021/01/29 全球购物
公司晚会主持词
2014/03/22 职场文书
国际经济与贸易专业求职信
2014/07/10 职场文书
感谢信的技巧及范例
2019/05/15 职场文书
解决thinkphp6(tp6)在状态码500下不报错,或者显示错误“Malformed UTF-8 characters”的问题
2021/04/01 PHP
MySQL基础(二)
2021/04/05 MySQL
解决pytorch读取自制数据集出现过的问题
2021/05/31 Python
vue的项目如何打包上线
2022/04/13 Vue.js
服务器间如何实现文件共享
2022/05/20 Servers