主要是为了有效防止机器恶意注册，对某一个特定已注册用户用特定程序暴力破解方式进行不断的登陆尝试。验证码是现在很多网站注册/登录时必填的，

虽然对用户可能有点麻烦，但是对网站/社区来说这个功能还是很有必要，也很重要，不少网站为了防止用户利用机器人自动注册、登录、灌水，都采用了验证码技术。

还有在一方面会避免同一时间有大量的用户同时登入，造成信息处理缓慢

转载请以超链接形式请注明原博客出处，尊重作者，尊重原创！

废话不多说，直接上代码，里面有代码的注释，方便你的理解

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <!--验证码-->

   <script language="javascript" type="text/javascript">

            var code;

            function createCode() {  //函数体

                code = "";

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

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

                var codeChars = 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 charNum = Math.floor(Math.random() * 52);//设置随机产生

                    code += codeChars[charNum];

                }

                if (checkCode)

                {

                    checkCode.className = "code";

                    checkCode.innerHTML = code;

                }

            }

         </script>

</head>

<style>

    /*验证码*/

.code

    {

          background-color: silver;

            font-family:Arial; /*设置字体*/

            font-style:initial;

             color:brown;

             font-size:20px;

             border:0;

              padding:2px 3px;

             letter-spacing:3px;

             font-weight:bolder;             

             width:81px;

             height:23px;

             margin-left: 120px;

             margin-top: -35px;

    }

    a

    {

        text-decoration:none;

        font-size:12px;

        color:#288bc4;

        }

    a:hover

    {

       text-decoration:underline;

        }

       .yz{

         position: absolute;

          margin-left: 220px;

          margin-top:-10px;

        }

</style>

<body onload="createCode()"><!--在页面加载的同时要加载验证码，否则页面加载完后验证码不会显示 -->

    <p>

        <label>      验证码：</label>

         <div class="code" id="checkCode" onclick="createCode()" ></div><a class="yz"  href="#" onclick="createCode()">看不清换一张</a>

      </p>

      <p>

          <label>请输入验证码：</label><input id="YZ" name="yz" width="30px;">

      </p>

      <input class="btttom"  type="button" name="OK" id="OK" onclick="GetDom()" value="确认"/>

</body>

<!--验证-->

<script>

  function GetDom(){

    if(document.getElementById("YZ").value==""){

            alert("验证码不能为空！");

            createCode();//输错一次或提交一次都将会刷新一次验证码

            return false; //结束本次会话

          }else if(document.getElementById("YZ").value.toUpperCase()!=code.toUpperCase()){ //toUpperCase不区分大小写

            alert("您输入的验证码有误，请重新输入！！");

            createCode();//读取文件

          }

      else{

            alert("ok");

        }

  }

</script>

</html>

　实验效果

　

小礼物走一波；

利用jQuery做登录界面的验证码的更多相关文章

  1. ASP .NET登录界面用户验证码代码

    //ASP .NET用户登录界面经常用到验证码代码如下 private void Page_Load(object sender, System.EventArgs e) { // 在此处放置用户代码 ...

  2. android——利用SharedPreference做引导界面

    很久以前就接触过sharedPreference这个android中的存储介质.但是一直没有实际使用过,今天在看之前做的“民用机型大全”的app时,突然想到可以使用sharedPreference类来 ...

  3. 用bootstrap做一个背景可轮转的登录界面

    用bootstrap做一个背景可轮转的登录界面 一.总结 一句话总结:用css3的动画的 @keyframes 规则,制作轮转图. 1.用bootstrap做一个背景可轮转的登录界面? a.动画部分用 ...

  4. sencha做个简单的登录界面

    很多人都在群里问要一个好看的登录界面,我表示很无奈,哪有好看的,每个人的要求不一样,要好看的只有自己做. 下面是我自己整理的一个通用版的登录界面,稍做修改,很容易能变成你想要的界面, 不说废话,直接上 ...

  5. 利用jquery+iframe做一个ajax上传效果

    以下是自学it网--中级班上课笔记 网址:www.zixue.it html页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict ...

  6. 运用HTML5+CSS3和CSS滤镜做的精美的登录界面

    原始出处http://chenjinfei.blog.51cto.com/2965201/774865 <!DOCTYPE HTML> <html> <head> ...

  7. 第三百三十五节，web爬虫讲解2—Scrapy框架爬虫—豆瓣登录与利用打码接口实现自动识别验证码

    第三百三十五节,web爬虫讲解2—Scrapy框架爬虫—豆瓣登录与利用打码接口实现自动识别验证码 打码接口文件 # -*- coding: cp936 -*- import sys import os ...

  8. 160620、利用 jQuery UI 和 Ajax 创建可定制的 Web 界面

    如今,网站比以往更具可定制性,允许用户更改其空间,根据自己的喜好对其进行个性化.个性化的主页或仪表板页面(例如 iGoogle.MyYahoo! 和 MyAOL)日渐普及,大多数 Web 应用程序内甚 ...

  9. jQuery和CSS3炫酷GOOGLE样式的用户登录界面

    这是一款使用jQuery和CSS3打造的GOOGLE样式的用户登录界面特效.该登录界面特效中,右上角的小问号和错误提示小图标使用SVG来制作.username和password输入框採用浮动标签特效. ...

随机推荐

  1. JiJiDown

    发生了预料之外的错误:System.Reflection.TargetInvocationException: Exception has been thrown by the target of a ...

  2. 浅谈关于树形dp求树的直径问题

    在一个有n个节点,n-1条无向边的无向图中,求图中最远两个节点的距离,那么将这个图看做一棵无根树,要求的即是树的直径. 求树的直径主要有两种方法:树形dp和两次bfs/dfs,因为我太菜了不会写后者这 ...

  3. android 快速开发框架

    https://github.com/lipanquan/LPQRapidDevelopmentFramework 依赖LPQLibrary https://github.com/lipanquan/ ...

  4. 协议 + socket import 和 form xx import *的区别 028

    一 . 网络通信协议(了解) 1 . osi 七层协议 (最好记住 面试会问) 应表会传网数物(应用层 表示层 会话层 传输层 网络层 数据链路层 物理层) 2 .tcp/ip五层 或 tcp/ip四 ...

  5. logback+spring实践

    配置文件名称使用:   logback-spring.xml 配置user.home是jvm传过来的系统参数,可以直接使用   <property name="LOG_PATH&quo ...

  6. 如何 将下载离线 nupkg 文件 安装到VS2017

      https://www.cnblogs.com/cncc/articles/8276878.html   --------------------------------------------- ...

  7. redis初步学习 0

    2.1 Redis是什么 REmote DIctionary Server(Redis) 是一个由Salvatore Sanfilippo写的key-value存储系统.Redis提供了一些丰富的数据 ...

  8. CSS 样式分类

    CSS样式可以分为三大类:内联样式.内部样式表和外部样式表 1.内联样式(样式写在html标签里,只对该标签的内容起作用) <span style="color:red;font-si ...

  9. Unity 平台宏定义

    官方文档: https://docs.unity3d.com/Manual/PlatformDependentCompilation.html

  10. 性能测试工具Jmeter08-Jmeter断言（检查点）

    断言是在请求的返回层面增加一层判断机制.因为请求成功了,并不代表结果一定正确,因此需要检测机制提高测试准确性. 下面介绍常用的jmeter三种断言 1.响应断言 例如: 模式匹配规则 2.Size A ...