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 相关文章推荐
Javascript 判断函数类型完美解决方案
Sep 02 Javascript
jQuery EasyUI 的EasyLoader功能介绍
Sep 12 Javascript
JS方法调用括号的问题探讨
Jan 24 Javascript
js获得参数的getParameter使用示例
Feb 26 Javascript
js/jquery判断浏览器的方法小结
Sep 02 Javascript
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
Dec 20 Javascript
Javascript中的call()方法介绍
Mar 15 Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
Mar 23 Javascript
使用JavaScript实现表格编辑器(实例讲解)
Aug 02 Javascript
jQuery实现锚点向下平滑滚动特效示例
Aug 29 jQuery
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 jQuery
[jQuery] 事件和动画详解
Mar 05 jQuery
详解一个基于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中的串行化变量和序列化对象
2006/09/05 PHP
php获取网页内容方法总结
2008/12/04 PHP
让PHP COOKIE立即生效,不用刷新就可以使用
2011/03/09 PHP
9个PHP开发常用功能函数小结
2011/07/15 PHP
PHP连接MSSQL2008/2005数据库(SQLSRV)配置实例
2014/10/22 PHP
利用jq让你的div居中的好方法分享
2013/11/21 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
2014/07/29 Javascript
jQuery预加载图片常用方法
2015/06/15 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
2015/09/28 Javascript
JS实现的表格行鼠标点击高亮效果代码
2015/11/27 Javascript
学好js,这些js函数概念一定要知道【推荐】
2017/01/19 Javascript
javascript遍历json对象的key和任意js对象属性实例
2017/03/09 Javascript
jQuery绑定事件方法及区别(bind,click,on,live,one)
2017/08/14 jQuery
js实现加载页面就自动触发超链接的示例
2017/08/31 Javascript
在Debian(Raspberry Pi)树莓派上安装NodeJS的教程详解
2017/09/19 NodeJs
vue+elementui实现点击table中的单元格触发事件--弹框
2020/07/18 Javascript
基于javascript实现移动端轮播图效果
2020/12/21 Javascript
[00:32]2018DOTA2亚洲邀请赛VGJ.T出场
2018/04/03 DOTA
用Python的线程来解决生产者消费问题的示例
2015/04/02 Python
使用Python从有道词典网页获取单词翻译
2016/07/03 Python
Python实现的端口扫描功能示例
2018/04/08 Python
Python socket套接字实现C/S模式远程命令执行功能案例
2018/07/06 Python
Python的对象传递与Copy函数使用详解
2019/12/26 Python
如何用python写个模板引擎
2021/01/14 Python
对pytorch中x = x.view(x.size(0), -1) 的理解说明
2021/03/03 Python
HTML5触摸事件(touchstart、touchmove和touchend)的实现
2020/05/08 HTML / CSS
ASOS比利时:英国线上零售商及自有品牌
2018/07/29 全球购物
Omio中国:全欧洲低价大巴、火车和航班搜索和比价
2018/08/09 全球购物
个人自我鉴定范文
2013/10/04 职场文书
入党自我鉴定范文
2013/10/04 职场文书
一夜的工作教学反思
2014/02/08 职场文书
关于元旦的广播稿
2014/02/16 职场文书
升职感谢信
2015/01/22 职场文书
2019个人半年工作总结
2019/06/21 职场文书
经典人生语录分享:不畏将来,不念过去,笑对当下
2019/12/12 职场文书
世界十大评分最高的动漫,CLANNAD上榜,第八赚足人们眼泪
2022/03/18 日漫