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 相关文章推荐
许愿墙中用到的函数
Oct 07 Javascript
编写跨浏览器的javascript代码必备[js多浏览器兼容写法]
Oct 29 Javascript
JQuery解析HTML、JSON和XML实例详解
Mar 29 Javascript
javascript学习笔记(五)原型和原型链详解
Oct 08 Javascript
vue,angular,avalon这三种MVVM框架优缺点
Apr 27 Javascript
IONIC自定义subheader的最佳解决方案
Sep 22 Javascript
AngularJS Phonecat实例讲解
Nov 21 Javascript
Node.js获取前端ajax提交的request信息
Feb 20 Javascript
Vue.js仿微信聊天窗口展示组件功能
Aug 11 Javascript
当vue路由变化时,改变导航栏的样式方法
Aug 22 Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
Sep 03 Javascript
Javascript和jquery在selenium的使用过程
Oct 31 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设计模式中单例模式的应用分析
2013/05/15 PHP
PHP实现批量生成App各种尺寸Logo
2015/03/19 PHP
CodeIgniter自定义控制器MY_Controller用法分析
2016/01/20 PHP
php swoft框架实例用法
2020/12/22 PHP
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
2010/01/12 Javascript
Web开发者必备的12款超赞jQuery插件
2010/12/03 Javascript
JavaScript检查数字是否为整数或浮点数的方法
2015/06/09 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
2016/12/02 Javascript
Ext JS 实现建议词模糊动态搜索功能
2017/05/13 Javascript
详解Angular4中路由Router类的跳转navigate
2017/06/09 Javascript
浅谈通过JS拦截 pushState和replaceState事件
2017/07/21 Javascript
使用rollup打包JS的方法步骤
2018/12/05 Javascript
实用的Vue开发技巧
2019/05/30 Javascript
Vue实战教程之仿肯德基宅急送App
2019/07/19 Javascript
Vue实现背景更换颜色操作
2020/07/17 Javascript
零基础写python爬虫之使用urllib2组件抓取网页内容
2014/11/04 Python
使用Python解析JSON数据的基本方法
2015/10/15 Python
Python中二维列表如何获取子区域元素的组成
2017/01/19 Python
利用python实现简单的循环购物车功能示例代码
2017/07/05 Python
Python中的TCP socket写法示例
2018/05/11 Python
Python 画出来六维图
2019/07/26 Python
PyTorch预训练的实现
2019/09/18 Python
Python 实现递归法解决迷宫问题的示例代码
2020/01/12 Python
pycharm设置python文件模板信息过程图解
2020/03/10 Python
iframe跨域的几种常用方法
2019/11/11 HTML / CSS
美国宠物美容和宠物用品购物网站:Cherrybrook
2018/12/07 全球购物
中国专业的音频分享平台:喜马拉雅
2019/05/24 全球购物
外语系毕业生找工作的求职信
2013/11/28 职场文书
个人欠款协议书范本2014
2014/11/02 职场文书
先进工作者推荐材料
2014/12/23 职场文书
医学生自荐信范文
2015/03/05 职场文书
专项资金申请报告
2015/05/15 职场文书
孝女彩金观后感
2015/06/10 职场文书
关于教师节的广播稿
2015/08/19 职场文书
CSS 圆形进度栏
2021/04/06 HTML / CSS
windows server2012 R2下安装PaddleOCR服务的的详细步骤
2022/09/23 Servers