一般处理程序生成简单的图片验证码并通过html验证用户输入的验证码是否正确

      最近没事研究了下验证码的的动态生成及通过cookie实现HTML页面对用户输入的验证码的校验，简要如下：

1、写了一个简单的验证码后台生成页面，代码如下：

using System;
using System.Collections.Generic;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Web;

using System.Drawing.Imaging;

namespace Asp.Net的学习
{
    /// <summary>
    /// ValidateImg 的摘要说明
    /// </summary>
    public class ValidateImg : IHttpHandler
    {
        //需要随机生成的字符
        char[] chars = null;
        Random ran = new Random();
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "image/jpeg";
            //实例化需要随机产生的字符数组
            chars = new char[10] { 'a','B','D','f','R','I','L','1','7','9'};

//获得随机生成的字符串
            string s = GetRandomStr(5);
            //定义一个画布对象，来实现验证码图片的画画
            using (Image img = new Bitmap(90, 35))
            {
                using (Graphics g = Graphics.FromImage(img))
                {
                    //清除白色背景
                    g.Clear(Color.White);
                    //画一个边框
                    g.DrawRectangle(new Pen(Brushes.Black),new Rectangle(0,0,img.Width-1,img.Height-1));
                    //画干扰线或者点

g.DrawString(s, new Font("微软雅黑", 14), Brushes.Red, 2, 5);
                    //画干扰线
                    DrawGanRao(g, 150, img);
                   
                }

//将img图片画到页面上来,以jepg的格式画
                img.Save(context.Response.OutputStream, ImageFormat.Jpeg);

HttpCookie cookie = new HttpCookie("code", s);
                context.Response.Cookies.Add(cookie);
                context.Response.Write("testaa");
                //测试cookie
                //context.Response.Cookies.Add(new HttpCookie("test","wahah"));
            }

}

#region 产生随机字符串
        private string GetRandomStr(int count)
        {
            StringBuilder sb = new StringBuilder(5);
            for (int i = 0; i < count; i++)
            {
                //得到随机数
                int index = ran.Next(chars.Length);
                sb.Append(chars[index]);
            }

return sb.ToString();
        }
        #endregion

#region 画干扰点
        /// <summary>
        /// 画干扰点
        /// </summary>
        /// <param name="g">画布</param>
        /// <param name="count">干扰点的数目</param>
        private void DrawGanRao(Graphics g,int count,Image img)
        {
            for (int i = 0; i < count; i++)
            {
                Point p1 = new Point(ran.Next(img.Width-1), ran.Next(img.Height-1));
                Point p2 = new Point(p1.X-3,p1.Y-3);

g.DrawLine(new Pen(Brushes.Blue), p1, p2);
            }
        }
        #endregion

public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

2、前台的html代码如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>登陆界面</title>
    <script type="text/javascript">
        window.onload = function () {
            //加载cookie
            loadCookie();

//加载提交事件的方法
            getDom("btnLogin").onclick = function () {
                //重新加载cookie
                loadCookie();

//获取图片验证码
                var hidCode = getDom("hidCode").value.toLowerCase();
                //判断当前用户输入的验证码和图片中的验证码是否一致，不一致则提示
                var validCode = getDom("txtValidCode").value.toLowerCase();
                if (validCode != hidCode) {
                    alert("验证码错误！请重新输入！")
                }
                else {
                    alert("验证码输入正确！");
                }
            }

//刷新验证码第一版本(采用url地址随时变化来刷新)
            getDom("imgCode").onclick = function () {
                this.src = "ValidateImg.ashx?time=" + new Date().toString();
                //注意加载cookie页面不能放在这个位置，否则获取到的后台的验证码字符串就不是最新的了
                //loadCookie();
            }
        }

function changeImg()
        {
            getDom("imgCode").src = "ValidateImg.ashx?time=" + new Date().toString();
        }

//获得当前页面的cookie并加载到页面的隐藏域中
        function loadCookie()
        {
            //获得当前cookie键值对的形式
            var cookies = document.cookie;
            var arrCookies = cookies.split(';');
            for (var i = 0; i < arrCookies.length; i++) {
                //遍历cookies
                var arr = arrCookies[i].split('=');
                if (arr[0] == "code") {
                    //将当前找到的cookie里面的验证码的值加到隐藏域中
                    getDom("hidCode").value = arr[1];
                }

}
        }

//获取dom的方法
        function getDom(domId)
        {
            return document.getElementById(domId);
        }
    </script>
</head>
<body>
    <form>
        <table>
            <tr>
                <td>用户名：</td>
                <td><input type="text" name="txtUserName" /></td>
                <td></td>
            </tr>
             <tr>
                <td>密&nbsp;&nbsp;&nbsp;&nbsp;码：</td>
                <td><input type="password" name="txtPwd" /></td>
                  <td></td>
            </tr>
            <tr>
                <td>验证码：</td>
                <td><input type="text" name="txtValidCode" /></td>
                <td><img src="ValidateImg.ashx" alt="单击刷新" id="imgCode" /><a href="javascript:changeImg();" id="reflush" >单击刷新</a></td>
            </tr>
            <tr>
                <td colspan="3">
                    <input type="button" value="登陆" id="btnLogin" />
                </td>
            </tr>
        </table>
        <input type="hidden" id="hidCode" />
    </form>
</body>
</html>

以上是用js实现的验证，菜鸟学习用哈哈

一般处理程序生成简单的图片验证码并通过html验证用户输入的验证码是否正确的更多相关文章

  1. 使用SpringSecurity3用户验证(异常信息，验证码)

    1. 自定义user-service后,封装自定义异常信息返回 通常情况下,抛UsernameNotFoundException异常信息是捕捉不了,跟踪源码后发现 try { user = retri ...

  2. .NET Core实战项目之CMS 第十六章 用户登录及验证码功能实现

    前面为了方便我们只是简单实现了基本业务功能的增删改查,但是登录功能还没有实现,而登录又是系统所必须的,得益于 ASP.NET Core的可扩展性因此我们很容易实现我们的登录功能.今天我将带着大家一起来 ...

  3. 获取验证码随机字符串@return string $captcha，随机验证码文字

    <?php//验证码工具类class Captcha{//属性private $width;private $height;private $fontsize;private $pixes;pr ...

  4. Expression Blend4经验分享：制作一个简单的图片按钮样式

    这次分享如何做一个简单的图片按钮经验 在我的个人Silverlight网页上,有个Iphone手机的效果,其中用到大量的图片按钮 http://raimon.6.gwidc.com/Iphone/de ...

  5. jquery简单的图片切换效果，支持pc端、移动端的banner图片切换开发

    详细内容请点击 无意中看见了两年前写的一个图片切换,那会儿刚刚学习网页制作,可以说是我的第一个处女座的jquery图片切换效果.无聊之余对它的宽度稍稍做了一下修改,变成了支持pc端.手机端全屏的ban ...

  6. Objective-C ,ios,iphone开发基础:快速实现一个简单的图片查看器

    新建一个single view 工程: 关闭ARC , 在.xib视图文件上拖放一个UIImageView  两个UIButton ,一个UISlider ,布局如图. 并为他们连线, UIImage ...

  7. 简单实现图片间的切换动画 主要用到ViewPager

    简单实现图片间的切换动画 主要用到ViewPagerViewPager是android扩展包v4包中的类,这个类可以让用户左右切换当前的view.ViewPager类需要一个PagerAdapter适 ...

  8. UEditor之实现配置简单的图片上传示例

    UEditor之实现配置简单的图片上传示例 原创 2016年06月11日 18:27:31 开心一笑 下班后,阿华到楼下小超市买毛巾,刚买完出来,就遇到同一办公楼里另一家公司的阿菲,之前与她远远的有过 ...

  9. 潭州课堂25班：Ph201805201 django 项目 第九课 图片验证码前台实现，判断用户是否注册功能实现 (课堂笔记）

    u胎代码实现 : 针对每一个 app 写个 js 脚本, 先给 users 的 app 应用创建个 js:在指定目录下的 js 文件夹下,创建 users 文件夹,下创建 suth.js ,图片验证 ...

随机推荐

  1. POJ-2926 Requirements 最远曼哈顿距离

    题目链接:http://poj.org/problem?id=2926 题意:求5维空间的点集中的最远曼哈顿距离.. 降维处理,推荐2009武森<浅谈信息学竞赛中的“0”和“1”>以及&l ...

  2. java 内部类的使用

    http://www.cnblogs.com/wenruo/p/5387995.html 内部类 就是在类中嵌套的另一个类. 非静态内部类 创建内部类的方式就是把类定义在外部类里面. class Ou ...

  3. PCB编辑快捷键

    TAB: 调节属性PgUp: 放大PgDn: 缩小Delete: 删除Ctrl+C: 复制Ctrl+V: 粘贴Ctrl+X: 剪贴Ctrl+Z: 撤销Ctrl+Y: 取消撤销Ctrl+F: 查找Ctr ...

  4. light oj 1116 - Ekka Dokka

    1116 - Ekka Dokka   PDF (English) Statistics Forum Time Limit: 2 second(s) Memory Limit: 32 MB Ekka ...

  5. nyoj 44 子串和

    子串和 时间限制:5000 ms  |  内存限制:65535 KB 难度:3   描述 给定一整型数列{a1,a2...,an},找出连续非空子串{ax,ax+1,...,ay},使得该子序列的和最 ...

  6. [C语言 - 11] 语言编译执行

    使用gcc编译器 1.预编译 gcc -E Hello.c -o Hello.i 2.汇编 gcc -S Hello.i -o Hello.s   3.编译 gcc -c Hello.s -o Hel ...

  7. Stones

    题目是:HDU1896 题目简述:输入一堆石头,每个石头有自己所在的位置p,以及自己可以抛多远的距离d.你每遇到第奇数个石头,就把石头丢出去,第偶数个石头就不管.计算出最后一个石头它所处的位置. 解法 ...

  8. 移动端rem布局和百分比栅格化布局

    移动端的rem: 使用方法: 设置html的font-size,根据浏览器分辨率缩放 设置根元素font-size为100px这样好用的值,不要设为10px这样的: 然后获取浏览器的分辨率,也就是视口 ...

  9. Genymotion - 强大好用高性能的 Android 模拟器 (在电脑流畅运行APK安卓软件游戏的利器)

    随着 Android 系统的应用和游戏越来越丰富,甚至有些比起Windows.Mac上的软件更加好用好玩,因此很多人都希望能在电脑上也能玩到安卓的游戏或APP. 我们曾推荐过 BlueStacks,而 ...

  10. 对PostgreSQL cmin和cmax的理解

    看例子: 开两个终端来对比: 在终端A: [pgsql@localhost bin]$ ./psql psql () Type "help" for help. pgsql=# b ...