JavaScript使用Math.random()生成简单的验证码


Posted in Javascript onJanuary 21, 2019

第一种:单纯的纯数字验证码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js验证码</title>
</head>
<body>
<div class="yzm" style="width: 20%;height: 300px;text-align: center;background-color: pink;line-height: 200px;"></div>
</body>
</html>
<script>
  window.onload = function () {
    var yzm=document.querySelector(".yzm");
    //页面一加载完成就生成随机数调用rand()
    yzm.innerHTML=rand(5);
    //点击切换随机码
    yzm.onclick=function() {
      var num = rand(5);
      this.innerHTML = num;
    };
    //生成随机码
    function rand(number){
   //用来存储产生的随机数
    var num="";
      for(var i=0;i<number;i++){
        num+=Math.floor(Math.random()*10)
      }
      return num;
    }
  }
</script>

第二种:输入的验证码与生成的验证码进行校验(数字与字母相结合)

<html>
<head>
  <meta charset="UTF-8">
  <title>验证码</title>
  <style type="text/css">
    #code
    {
      font-family:Arial;
      font-style:italic;
      font-weight:bold;
      border:0;
      letter-spacing:2px;
      color:blue;
    }
  </style>
</head>
<body>
<div>
  <input type = "text" id = "input"/>
  <input type = "button" id="code" onclick="createCode()"/>
  <input type = "button" value = "验证" onclick = "validate()"/>
</div>
</body>
</html>
<script>
  var code ; //在全局定义验证码
  var number = 5;//验证码生成的个数
  var checkCode = document.getElementById("code");
  //产生验证码(页面一加载就生成)
  window.onload = function (){
    createCode();
  };
  //产生验证码(输入错误的时候刷新验证码,函数调用)
  function createCode(){
    code = "";
    var codeLength = number;//验证码的长度
//    var checkCode = document.getElementById("code");
    var random = [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',
      'S','T','U','V','W','X','Y','Z','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r',
      's','t','u','v','w','x','y','z'];//随机数
    for(var i = 0; i < codeLength; i++) {//循环操作
      var index = Math.floor(Math.random()*random.length);//取得随机数的索引(random.length)
      code += random[index];//根据索引取得随机数加到code上
    }
    checkCode.value = code;//把code值赋给验证码
  }
  //校验验证码
  function validate(){
    var inputCode = document.getElementById("input").value.toUpperCase(); //取得输入的验证码并转化为大写
    if(inputCode.length <= 0) { //若输入的验证码长度为0
      alert("请输入验证码!"); //则弹出请输入验证码
    } else if(inputCode != code.toUpperCase() ) { //将随机产生的验证码转化为大写,若输入的验证码与产生的验证码不一致时
      alert("验证码输入错误!@_@"); //则弹出验证码输入错误
      createCode();//刷新验证码
      document.getElementById("input").value = "";//清空文本框
    }
    else { //输入正确时
      alert("正确^-^"); //弹出^-^
    }
  }
</script>

若有不足请多多指教!希望给您带来帮助!

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。如果你想了解更多相关内容请查看下面相关链接

Javascript 相关文章推荐
jquery 分页控件实现代码
Nov 30 Javascript
jquery ajax执行后台方法
Mar 18 Javascript
css值转换成数值请抛弃parseInt
Oct 24 Javascript
jQuery学习笔记 获取jQuery对象
Sep 19 Javascript
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
Jan 24 Javascript
JavaScript定时器和优化的取消定时器方法
Jul 03 Javascript
jQuery.form插件的使用及跨域异步上传文件
Apr 27 Javascript
js修改onclick动作的四种方法(推荐)
Aug 18 Javascript
bootstrap datepicker插件默认英文修改为中文
Jul 28 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
Aug 16 Javascript
详解JavaScript的BUG和错误
May 07 Javascript
JavaScript实现构造json数组的方法分析
Aug 17 Javascript
详解一个基于react+webpack的多页面应用配置
Jan 21 #Javascript
js中对象和面向对象与Json介绍
Jan 21 #Javascript
详解vuex中action何时完成以及如何正确调用dispatch的思考
Jan 21 #Javascript
JavaScript常用事件介绍
Jan 21 #Javascript
JavaScript使用闭包模仿块级作用域操作示例
Jan 21 #Javascript
JavaScript闭包与作用域链实例分析
Jan 21 #Javascript
js中事件对象和事件委托的介绍
Jan 21 #Javascript
You might like
鸡肋的PHP单例模式应用详解
2013/06/03 PHP
PHP分页详细讲解(有实例)
2013/10/30 PHP
PHP输出一个等腰三角形的方法
2015/05/12 PHP
php封装的smartyBC类完整实例
2016/10/19 PHP
PHP之多条件混合筛选功能的实现方法
2019/10/09 PHP
我见过最全的个人js加解密功能页面
2007/12/12 Javascript
javascript Demo模态窗口
2009/12/06 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
2015/02/13 Javascript
Vue.js每天必学之指令系统与自定义指令
2016/09/07 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
2016/10/12 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
2017/02/08 Javascript
老生常谈Bootstrap媒体对象
2017/07/06 Javascript
nodejs结合socket.io实现websocket通信功能的方法
2018/01/12 NodeJs
在angular 6中使用 less 的实例代码
2018/05/13 Javascript
微信小程序实现星级评分和展示
2018/07/05 Javascript
js实现简单五子棋游戏
2020/05/28 Javascript
python统计一个文本中重复行数的方法
2014/11/19 Python
Windows下为Python安装Matplotlib模块
2015/11/06 Python
PyQt5主窗口动态加载Widget实例代码
2018/02/07 Python
数据清洗--DataFrame中的空值处理方法
2018/07/03 Python
Python实现批量修改图片格式和大小的方法【opencv库与PIL库】
2018/12/03 Python
selenium+python自动化测试之环境搭建
2019/01/23 Python
Python数据结构与算法(几种排序)小结
2019/06/22 Python
Python使用monkey.patch_all()解决协程阻塞问题
2020/04/15 Python
澳大利亚领先的男装零售连锁店:Lowes
2020/08/07 全球购物
挑战杯创业计划书的写作指南
2014/01/07 职场文书
3的组成教学反思
2014/04/30 职场文书
道德之星事迹材料
2014/05/03 职场文书
自愿解除劳动合同协议书
2014/09/11 职场文书
晚自修旷课检讨书怎么写
2014/11/17 职场文书
2015年社区综治工作总结
2015/04/21 职场文书
公司捐书倡议书
2015/04/27 职场文书
环保建议书作文300字
2015/09/14 职场文书
教师实习自我鉴定总结
2019/08/20 职场文书
matlab xlabel位置的设置方式
2021/05/21 Python
梳理总结Python开发中需要摒弃的18个坏习惯
2022/01/22 Python