纯js验证码

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>纯js验证码</title>
  5.     </head>
  6. <style>
  7. #code{font-family:Arial; font-style:italic; font-weight:bold; border:0; letter-spacing:2px; color:blue;  }
  8. </style>
  9. <script src="https://lib.baomitu.com/jquery/3.4.1/jquery.js"></script>
  10. <body>
  11.     <div style="width:300px;">
  12.         <span class="web-form-span " >验证码：</span>
  13.         <input  type="text" class=" web-form-input " required="required" id="Yzm" style="width: 30%;float: initial;" >
  14.         <input type = "button" id="code" value="点我验证" class="btn-list-btn" onclick="createCode()"/>
  15.     </div>
  16. </body>
  17. <script>
  18.     //在全局定义验证码
  19.     var code;
  20.     //产生验证码
  21.     function createCode(){
  22.         code = "";
  23.         var codeLength = 4;//验证码的长度
  24.         var checkCode = document.getElementById("code");
  25.         var random = new Array(0,1,2,3,4,5,6,7,8,9,
  26.             'A','B','C','D','E','F','G','H','I','J','K','L','M',
  27.             'N','O','P','Q','R', 'S','T','U','V','W','X','Y','Z',
  28.             'a','b','c','d','e','f','g','h','i','j','k','l','m',
  29.             'n','o','p','q','r','s','t','u','v','w','x','y','z');//随机数
  30.         for(var i = 0; i < codeLength; i++) {//循环操作
  31.             var index = Math.floor(Math.random()*62);//取得随机数的索引（0~61）
  32.             code += random[index];//根据索引取得随机数加到code上
  33.         }
  34.         checkCode.value = code;//把code值赋给验证码
  35.     }
  36.     //校验验证码
  37.     document.getElementById("Yzm").addEventListener("change",validate);
  38.     //验证事件
  39.     function validate(){
  40.         var inputCode = document.getElementById("Yzm").value.toUpperCase(); //取得输入的验证码并转化为大写
  41.         if(inputCode.length <= 0) { //若输入的验证码长度为0
  42.         　　alert("请输入验证码！"); //则弹出请输入验证码
  43.         　　$("#Yzm").focus();
  44.         　　YZM = false;
  45.         } else if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时
  46.         　　alert("验证码输入错误！@_@"); //则弹出验证码输入错误
  47.         　　createCode();//刷新验证码
  48.         　　$("#Yzm").val("");//清空文本框
  49.         　　$("#Yzm").focus();//重新聚焦验证码框
  50.         　　YZM = false;
  51.         } else { //输入正确时
  52.         　　$("#Yzm").blur();//绑定验证码输入正确时要做的事
  53.         　　YZM = true;
  54.         　　alert("验证码正确！");
  55.         }
  56.     };
  57. </script>
  58. </html>

纯js验证码的更多相关文章

  1. 纯JS实现俄罗斯方块，打造属于你的游戏帝国

    纯JS俄罗斯方块,打造属于你的游戏帝国. 本文原始作者博客 http://www.cnblogs.com/toutou 俄罗斯方块(Tetris, 俄文:Тетрис)是一款电视游戏机和掌上游戏机游戏 ...

  2. F2工作流引擎之-纯JS Web在线可拖拽的流程设计器（八）

          Web纯JS流程设计器无需编程,完全是通过鼠标拖.拉.拽的方式来完成,支持串行.并行.分支.异或分支.M取N路分支.会签.聚合.多重聚合.退回.传阅.转交,都可以非常方便快捷地实现,管理员 ...

  3. ［原创］纯JS实现网页中多选复选框checkbox和单选radio的美化效果

    图片素材: 最终效果图: <html><title> 纯JS实现网页中多选复选框checkbox和单选radio的美化效果</title><head>& ...

  4. 纯js异步无刷新请求(只支持IE)

    纯js异步无刷新请求 下载地址:http://pan.baidu.com/s/1slakL1F 所以因为非IE浏览器都禁止跨域请求,所以以只支持IE. <HTML> <!-- 乱码( ...

  5. [分享黑科技]纯js突破localstorage存储上线，远程抓取图片，并转码base64保存本地，最终实现整个网站所有静态资源离线到用户手机效果却不依赖浏览器的缓存机制，单页应用最新黑科技

    好久没有写博客了,想到2年前答应要放出源代码的也没放出来,最近终于有空先把纯js实现无限空间大小的本地存储的功能开源了,项目地址https://github.com/xueduany/localsto ...

  6. 纯js实现复制到剪贴板功能

    在网页上复制文本到剪切板,一般是使用JS+Flash结合的方法,网上有很多相关文章介绍.随着 HTML5 技术的发展,Flash 已经在很多场合不适用了,甚至被屏蔽.本文介绍的一款JS插件,实现了纯J ...

  7. js 验证码 倒计时60秒

    js 验证码 倒计时60秒 <input type="button" id="btn" value="免费获取验证码" /> & ...

  8. baguetteBox.js响应式画廊插件(纯JS)

    baguetteBox.js baguetteBox.js 是一个简单和易于使用lightbox纯JavaScript脚本,拥有图像放大缩小并带有相应的CSS3过度,并能在触摸屏等设备上完美展示. D ...

  9. 纯js和纯css+html制作的手风琴的效果

    一:纯css+html的手风琴效果 这种用css写的手风琴比较简单,主要是应用到css中的,transition属性. 代码如下: <!DOCTYPE HTML> <html> ...

随机推荐

  1. 最新CSS兼容方案

    CSS兼容方案,让你的样式完美兼容各大浏览器,这个方案主要是用来解决Safari的,Opear是在测试的时候顺带试了一下,结果发现竟然也行,所以顺便也解决了. .e {/*FF OP*/ color: ...

  2. colaboratory安装指定版本的tensorflow

    查看当前安装的tensorflow版本 !pip show tensorflow 安装指定版本 !pip install tensorflow==2.0 这速度,香不香.

  3. [C语言]给定直角三角形面积和斜边长

    [A题]   翘课的HugeGun_ 时间限制:1000ms   内存限制:65536kb 题目描述 HugeGun学姐很喜欢翘课.不幸的是,这一次她被发现了. 老师让她打扫了教室.当她把扫把靠在墙上 ...

  4. PHP正则匹配价格

    /** * 匹配价格 * @param $price * @return bool */ public static function checkPrice($price) { // 不能小于0 if ...

  5. Python/C++ in Visual Studio: An Alternative to Matlab/MEX

    来自Andrew Delong的博客 http://andrewdelong.wordpress.com/2012/11/03/pythonc-in-visual-studio-an-alternat ...

  6. [Oracle] - 使用 DBMS_UTILITY 查看异常详情

    DBMS_UTILITY.FORMAT_ERROR_BACKTRACE说明:这是在Oracle 10g数据库引入的,DBMS_UTILITY.FORMAT_ERROR_BACKTRACE内置函数返回一 ...

  7. Django项目配置参数大全

    数据库的配置 配置文件: settings.pyDATABASES = { # 'default': { # 'ENGINE': 'django.db.backends.sqlite3', # 'NA ...

  8. Git学习（二）——使用Git协同开发

    项目协同开发git操作 基本流程 1.开发前,拉一次远程仓库 2.工作区进行开发 3.将开发结果提交到本地版本库 git status查看时没有待处理的事件 4.拉取远程仓库(每一次要提交远程仓库前必 ...

  9. 【统计与建模】R语言基本操作

    # vec <- rep( seq(1,5,by=0.5),3) # vec <- seq( 1 , 10 , by = 1 ) # min(vec) #最小值 # max(vec) #最 ...

  10. 在论坛中出现的比较难的sql问题：18(字符合并 整数解析星期几)

    原文:在论坛中出现的比较难的sql问题:18(字符合并 整数解析星期几) 最近,在论坛中,遇到了不少比较难的sql问题,虽然自己都能解决,但发现过几天后,就记不起来了,也忘记解决的方法了. 所以,觉得 ...