通常處理程序生成簡單的圖片驗證碼並經過html驗證用戶輸入的驗證碼是否正確

時間 2019-11-30

標籤通常處理程序生成簡單圖片驗證碼並經 html 驗證用戶輸入是否正確欄目 HTML 简体版

原文原文鏈接

　　　　　　　　　　　　　　通常處理程序生成簡單的圖片驗證碼並經過html驗證用戶輸入的驗證碼是否正確javascript

最近沒事研究了下驗證碼的的動態生成及經過cookie實現HTML頁面對用戶輸入的驗證碼的校驗，簡要以下：html

一、寫了一個簡單的驗證碼後臺生成頁面，代碼以下：java

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

using System.Drawing.Imaging;cookie

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'};dom

            //得到隨機生成的字符串
            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);ui

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

}

        #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;
            }
        }
    }
}

二、前臺的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>密    碼：</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>