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

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

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

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

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

<!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. 记录Leetcode 鸡蛋掉落 的思路

    前言 首先看一下这个题目,是Leetcode的第887题"鸡蛋掉落": 你将获得 `K` 个鸡蛋,并可以使用一栋从 `1` 到 `N` 共有 `N` 层楼的建筑. 每个蛋的功能都是 ...

  2. 本地访问Vmware虚机Web网站

    情况:公司是域环境,Vmware网络设置的是NAT连接模式,里外装的都是Windows,虚机网络IP地址是自动获取的. 查看: 1.虚机Ping本地的IP地址可以Ping通: 2.本地Ping虚机的I ...

  3. 关于c语言的位运算&，|，^（看懂汉字的都能看懂）

    其中|,&可以当作逻辑运算符,当|,&当成逻辑运算符时,与||,&&的用法基本相似,&&,||运算时会当前面的表达式能够决定整个表达式,则不进行对后面的 ...

  4. python 分页 封装

    分页 封装 我是在项目根目录创建个分页文件 分页代码: class Pagination(object): def __init__(self, data_num, current_page, url ...

  5. GM MDI Tech 3 VS GM tech 2

    Many customers ask for this question: what is the difference between GM tech 2 and GM MDI Tech 3 sca ...

  6. SQL datetime和smalldatetime区别

    datetime 存储大小8个字节,精确到分后的3为小数,日期范围从1753 年 1 月 1 日到 9999 年 12 月 31 日:而 smalldatetime存储大小为4个字节,精确到分,日期范 ...

  7. javascrip学习之基础

    弹窗信息:三种消息框:警告框.确认框.提示框. window.alert("sometext"); var r=confirm("按下按钮");//提示信息,返 ...

  8. select获取到option的value和text方法

    function getSelectval(id){ var selId = document.getElementById(id); //获取select的id var seleIndex =sel ...

  9. pyplot

    错误: 执行 import matplotlib.pyplot 报错 ImportError: No module named _tkinter, please install the python- ...

  10. C++计算二叉树的节点数和高度

    用struct结构体的写法: /* * description: 计算二叉树的层数和节点数 * writeby: nick * date: 2012-10-23 16:16 * */ #include ...