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(笔记)
Oct 06 Javascript
javascript内存管理详细解析
Nov 11 Javascript
JS中的构造函数详细解析
Mar 10 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
Aug 27 Javascript
简单实现JS对dom操作封装
Dec 02 Javascript
JS使用正则表达式验证身份证号码
Jun 23 Javascript
vue-router的使用方法及含参数的配置方法
Nov 13 Javascript
angular6的table组件开发的实现示例
Dec 26 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
Aug 26 Javascript
详解elementui之el-image-viewer(图片查看器)
Aug 30 Javascript
浅谈layer弹出层按钮颜色修改方法
Sep 11 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
Sep 16 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
解决MySQL中文输出变成问号的问题
2008/06/05 PHP
php邮件发送,php发送邮件的类
2011/03/24 PHP
getimagesize获取图片尺寸实例
2014/11/15 PHP
thinkphp表单上传文件并将文件路径保存到数据库中
2016/07/28 PHP
php计算给定日期所在周的开始日期和结束日期示例
2017/02/06 PHP
PHP实现字符串大小写转函数的功能实例
2019/02/06 PHP
如何在Mozilla Gecko 用Javascript加载XSL
2007/01/09 Javascript
jQuery之自动完成组件的深入解析
2013/06/19 Javascript
js实现window.open不被拦截的解决方法汇总
2014/10/30 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
2015/03/09 Javascript
JavaScript提高性能知识点汇总
2016/01/15 Javascript
深入理解js generator数据类型
2016/08/16 Javascript
学习掌握JavaScript中this的使用技巧
2016/08/29 Javascript
Ztree新增角色和编辑角色回显问题的解决
2016/10/25 Javascript
jQuery html表格排序插件tablesorter使用方法详解
2017/02/10 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
2017/03/13 Javascript
jquery获取链接地址和跳转详解(推荐)
2017/08/15 jQuery
解决LayUI表单获取不到data的问题
2018/08/20 Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
2019/03/04 Javascript
vue中组件的3种使用方式详解
2019/03/23 Javascript
深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
2020/02/19 Javascript
在Vuex中Mutations修改状态操作
2020/07/24 Javascript
[03:51]吞吞映像 每周精彩击杀top10第二弹
2014/06/25 DOTA
用Python的Django框架来制作一个RSS阅读器
2015/07/22 Python
详解Python装饰器由浅入深
2016/12/09 Python
Python面向对象编程基础解析(一)
2017/10/26 Python
Python Pandas中根据列的值选取多行数据
2019/07/08 Python
pytest中文文档之编写断言
2019/09/12 Python
pytorch之Resize()函数具体使用详解
2020/02/27 Python
python使用PIL剪切和拼接图片
2020/03/23 Python
详解python对象之间的交互
2020/09/29 Python
pyspark对Mysql数据库进行读写的实现
2020/12/30 Python
For Art’s Sake官网:手工制作的奢华眼镜
2018/12/15 全球购物
Currentbody美国/加拿大:美容仪专家
2020/03/09 全球购物
白莲教口号
2014/06/18 职场文书
golang 实现时间戳和时间的转化
2021/05/07 Golang