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 常用方法基础教程
Feb 06 Javascript
js字符串日期yyyy-MM-dd转化为date示例代码
Mar 06 Javascript
jQuery消息提示框插件Tipso
May 04 Javascript
Javascript中的作用域和上下文深入理解
Jul 03 Javascript
JSONP跨域请求实例详解
Jul 04 Javascript
解析JavaScript模仿块级作用域
Dec 29 Javascript
jquery实现数字输入框
Feb 22 Javascript
vue中将html字符串转换成html后遇到的问题小结
Dec 10 Javascript
详解Vue2.5+迁移至Typescript指南
Aug 01 Javascript
JavaScript生成随机验证码代码实例
Sep 28 Javascript
15 分钟掌握vue-next响应式原理
Oct 13 Javascript
jquery实现购物车基本功能
Oct 25 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学习笔记之一
2011/01/17 PHP
ThinkPHP空模块和空操作详解
2014/06/30 PHP
php简单实现查询数据库返回json数据
2015/04/16 PHP
php生成动态验证码gif图片
2015/10/19 PHP
[企业公众号]升级到[企业微信]之后发送消息失败的解决方法
2017/06/30 PHP
一段利用WSH获取登录时间的jscript代码
2008/05/11 Javascript
JS将秒换成时分秒实现代码
2013/09/03 Javascript
禁止拷贝网页内容的js代码
2014/01/22 Javascript
jquery禁用右键示例
2014/04/28 Javascript
jQuery.extend 函数及用法详细
2015/09/06 Javascript
基于Datatables跳转到指定页的简单实例
2017/11/09 Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
2018/05/03 jQuery
iconfont的三种使用方式详解
2018/08/05 Javascript
微信小程序实现列表的横向滑动方式
2020/07/15 Javascript
Vue 打包的静态文件不能直接运行的原因及解决办法
2020/11/19 Vue.js
[57:12]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第一场 10.31
2020/11/02 DOTA
Python中的包和模块实例
2014/11/22 Python
Python进阶-函数默认参数(详解)
2017/05/18 Python
Python线性回归实战分析
2018/02/01 Python
python使用tensorflow深度学习识别验证码
2018/04/03 Python
Python 实现文件读写、坐标寻址、查找替换功能
2019/09/11 Python
softmax及python实现过程解析
2019/09/30 Python
python操作docx写入内容,并控制文本的字体颜色
2020/02/13 Python
python pandas利用fillna方法实现部分自动填充功能
2020/03/16 Python
Python实现简单猜数字游戏
2021/02/03 Python
彪马俄罗斯官网:PUMA俄罗斯
2019/07/13 全球购物
ASP.NET中的身份验证有那些
2012/07/13 面试题
如何查看在weblogic中已经发布的EJB
2012/06/01 面试题
大学毕业典礼演讲稿
2014/09/09 职场文书
收款委托书
2014/10/14 职场文书
工程安全生产协议书
2014/11/21 职场文书
护士2015年终工作总结
2015/04/29 职场文书
幼儿园老师新年寄语
2015/08/17 职场文书
2019财务管理制度最新范本!
2019/07/09 职场文书
Python Django项目和应用的创建详解
2021/11/27 Python
Python 操作pdf pdfplumber读取PDF写入Exce
2022/08/14 Python