纯js验证码

<!DOCTYPE html>

<html>

    <head>

        <title>纯js验证码</title>

    </head>

<style>

#code{font-family:Arial; font-style:italic; font-weight:bold; border:0; letter-spacing:2px; color:blue;  }

</style>

<script src="https://lib.baomitu.com/jquery/3.4.1/jquery.js"></script>

<body>

    <div style="width:300px;">

        <span class="web-form-span " >验证码：</span>

        <input  type="text" class=" web-form-input " required="required" id="Yzm" style="width: 30%;float: initial;" >

        <input type = "button" id="code" value="点我验证" class="btn-list-btn" onclick="createCode()"/>

    </div>

</body>

<script>

    //在全局定义验证码

    var code;

    //产生验证码

    function createCode(){

        code = "";

        var codeLength = 4;//验证码的长度

        var checkCode = document.getElementById("code");

        var random = new Array(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()*62);//取得随机数的索引（0~61）

            code += random[index];//根据索引取得随机数加到code上

        }

        checkCode.value = code;//把code值赋给验证码

    }

    //校验验证码

    document.getElementById("Yzm").addEventListener("change",validate);

    //验证事件

    function validate(){

        var inputCode = document.getElementById("Yzm").value.toUpperCase(); //取得输入的验证码并转化为大写

        if(inputCode.length <= 0) { //若输入的验证码长度为0

        　　alert("请输入验证码！"); //则弹出请输入验证码

        　　$("#Yzm").focus();

        　　YZM = false;

        } else if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时

        　　alert("验证码输入错误！@_@"); //则弹出验证码输入错误

        　　createCode();//刷新验证码

        　　$("#Yzm").val("");//清空文本框

        　　$("#Yzm").focus();//重新聚焦验证码框

        　　YZM = false;

        } else { //输入正确时

        　　$("#Yzm").blur();//绑定验证码输入正确时要做的事

        　　YZM = true;

        　　alert("验证码正确！");

        }

    };

</script>

</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. 【Leetcode_easy】905. Sort Array By Parity

    problem 905. Sort Array By Parity solution1: class Solution { public: vector<int> sortArrayByP ...

  2. unix系统简明教程 命令

    who                                 显示电脑用户信息 liu :0 Oct 6 13:17 (:0)liu pts/2 Oct 6 13:22 (:0) who a ...

  3. Ubuntu 中改变文件的默认打开方式(转)

     源自:Ubuntu 中改变文件的默认打开方式 1. 相关配置文件 全局配置 /etc/gnome/defaults.list /usr/share/applications/mimeinfo.cac ...

  4. django使用pyecharts(1)----django加入echarts

    Django 中使用 pyecharts.一.普通django加入echarts Django 模板渲染 Step 0: 新建一个 Django 项目 $ django-admin startproj ...

  5. PB笔记之导入、导出组件

    导入组件 导出组件

  6. VS.NET(C#)--2.8HTML服务器控件

    HTML服务器控件 服务器不处理HTML控件,例如:<h1>.<a>超链接.<input>,直接送到客户端,由浏览器呈现. 把HTML控件转换成HTML服务器控件, ...

  7. Linux添加vsftp账户和设置目录权限

    改变store下面的所有.php文件属主为ftpd[root@www ~]# chgrp ftpd /store/*.php[root@www ~]# chown ftpd /store/*.php ...

  8. ivew数控件Tree自定义节点内容示例分析

    ivew数控件Tree自定义节点内容示例分析 demo地址:https://run.iviewui.com/plcWlM4H <template> <Tree :data=" ...

  9. java使用AES-256-ECB（PKCS7Padding）解密——微信支付退款通知接口指定解密方式

    1.场景 在做微信支付退款通知接口时,微信对通知的内容做了加密,并且指定用 AES256 解密,官方指定的解密方式如下: 2.导包 <!-- https://mvnrepository.com/ ...

  10. Action请求后台出现Response already commited异常解决方法

    在编写导出功能使用action请求,在处理导出异常时期望跳转异常页,Controller中的方法返回类型String的url 在处理完逻辑导出文件后后台控制台出现 WARN  [org.springf ...