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 相关文章推荐
FileUpload上传图片(图片不变形)
Aug 05 Javascript
基于Jquery的实现回车键Enter切换焦点
Sep 14 Javascript
js自定义事件及事件交互原理概述(二)
Feb 01 Javascript
javascript中的undefined和not defined区别示例介绍
Feb 26 Javascript
touch.js 拖动、缩放、旋转 (鼠标手势)功能代码
Feb 04 Javascript
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
详解使用webpack打包编写一个vue-toast插件
Nov 08 Javascript
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
史上最为详细的javascript继承(推荐)
May 18 Javascript
Vue实例的对象参数options的几个常用选项详解
Nov 08 Javascript
微信小程序实现canvas分享朋友圈海报
Jun 21 Javascript
Nest.js 授权验证的方法示例
Feb 22 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/02/19 PHP
基于PHP生成静态页的实现方法
2013/05/10 PHP
ThinkPHP实现一键清除缓存方法
2014/06/26 PHP
Yii2下点击验证码的切换实例代码
2017/03/14 PHP
laravel5.6 框架邮件队列database驱动简单demo示例
2020/01/26 PHP
用jquery设置按钮的disabled属性的实现代码
2010/11/28 Javascript
找出字符串中出现次数最多的字母和出现次数精简版
2012/11/07 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
2014/03/08 Javascript
给js文件传参数(详解)
2014/07/13 Javascript
jquery实现显示已选用户
2014/07/21 Javascript
jQuery实现的多级下拉菜单效果代码
2015/08/24 Javascript
基于jQuery实现点击弹出层实例代码
2016/01/01 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
2016/03/07 Javascript
jquery.validate使用详解
2016/06/02 Javascript
基于JavaScript实现跳转提示页面
2016/09/24 Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
2017/01/19 Javascript
详解Vue2.0之去掉组件click事件的native修饰
2017/04/20 Javascript
ES5 ES6中Array对象去除重复项的方法总结
2017/04/27 Javascript
vue 2.0路由之路由嵌套示例详解
2017/05/08 Javascript
简单实现js上传文件功能
2017/08/21 Javascript
Angular.JS读取数据库数据调用完整实例
2019/07/02 Javascript
详解python eval函数的妙用
2017/11/16 Python
Python Json序列化与反序列化的示例
2018/01/31 Python
python批量导入数据进Elasticsearch的实例
2018/05/30 Python
浅谈python3.x pool.map()方法的实质
2019/01/16 Python
初次部署django+gunicorn+nginx的方法步骤
2019/09/11 Python
Python基于requests库爬取网站信息
2020/03/02 Python
python Zmail模块简介与使用示例
2020/12/19 Python
瑞典度假品牌:OAS
2019/05/28 全球购物
皇家阿尔伯特瓷器美国官网:Royal Albert美国
2020/02/16 全球购物
什么是"引用"?申明和使用"引用"要注意哪些问题?
2016/03/03 面试题
老公给老婆的保证书
2014/04/28 职场文书
大学生心理活动总结
2014/07/04 职场文书
我爱祖国演讲稿
2014/09/02 职场文书
大学运动会加油稿200字(5篇)
2014/09/27 职场文书
开业庆典致辞
2015/08/01 职场文书