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

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

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

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

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

<!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. Django 12 中间件、上下文处理器和admin后台

    Django 12 中间件.上下文处理器和admin后台 一.中间件 #Django中间件 (Middleware) # 一个轻量级.底层的“插件”系统,可以介入Django的请求和响应处理过程,修改 ...

  2. P1110 [ZJOI2007]报表统计 （multiset）

    [题目链接] https://www.luogu.org/problemnew/show/P1110 有以下三种操作: INSERT i k:在原数列的第i个元素后面添加一个新元素k:如果原数列的第i ...

  3. python中 列表 字典 元组的了解

    #######列表######1.列表的特性 server = [['http'],['ssh'],['ftp']] server1 = [['mysql'],['firewalld']]  连接  ...

  4. Array to List

    List<OisDiscountIndex> discountIndexes = Arrays.asList(new OisDiscountIndex[trades.size()]);

  5. forEach与jdk8中的lambda, Stream

    增强for循环 :forEach 反编译后可以看到实际使用的仍然是Iterator+while遍历的 forEach的优点是写法简单,缺点是不能使用xxx.remove(e)或者iter.remove ...

  6. vue-cli构建的项目打包出现里面的js,css缺少dist路径

    转载 https://www.cnblogs.com/wanf/p/7871787.html

  7. iterable- 什么是可迭代对象

    什么是可迭代对象? 可以被For循环执行的 字符串.列表这2个是可迭代对象

  8. RTT设备与驱动之PWM

    这里将PWM当成一个设备:PWM简介 上图是一个简单的 PWM 原理示意图,假定定时器工作模式为向上计数,当计数值小于阈值时,则输出一种电平状态,比如高电平,当计数值大于阈值时则输出相反的电平状态,比 ...

  9. Unity GameObject.FindObjectOfType<>(); 按类型查找游戏对象

    FindObjectOfType<>()   是按类型查找游戏对象.<>里面填写类型,那要是有多个这种类型的呢?来试一下. 1. 新建一个场景,新建一个Test.cs脚本,内容 ...

  10. 使用WindowsAPI播放PCM音频

    这一篇文章同上一篇<使用WindowsAPI获取录音音频>原理具有相似之处,不再详细介绍函数与结构体的参数 1. waveOutGetNumDevs 2. waveOutGetDevCap ...