一、ASPX 登陸界面驗證碼 1、登陸驗證碼圖片和輸入驗證碼框 2、js $(function () { $("#loginBtn").click(function () { var Pwd = $("#PwdTbx").val(); var md5pwd = $.md5(Pwd); $("#Pwd ...
一、ASPX 登陸界面驗證碼
1、登陸驗證碼圖片和輸入驗證碼框
<asp:TextBox ID="txtValiCode" runat="server" Width="50px"></asp:TextBox> <asp:Image ID="ValiCode" ImageUrl="CreateValiImg.aspx" runat="server" style="position:relative;top:4px;" />
2、js
$(function () { $("#loginBtn").click(function () { var Pwd = $("#PwdTbx").val(); var md5pwd = $.md5(Pwd); $("#PwdTbx").val(md5pwd); }); $("#txtValiCode").val(""); $("#ValiCode").click(function () { location.reload(); }); });View Code
3、創建生產驗證碼的aspx頁 CreateValiImg.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CreateValiImg.aspx.cs" Inherits="CreateValiImg" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> </head> <body> <form id="form1" runat="server"> <div> </div> </form> </body> </html>View Code
後臺代碼
using System; using System.Collections.Generic; using System.Drawing; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class CreateValiImg : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { string validateNum = CreateRandomNum(4); CreateImage(validateNum); Session["ValidateNum"] = validateNum; } //生產隨機數 private string CreateRandomNum(int NumCount) { string allChar = "0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F,G,H,I,J,K,O,P,Q,R,S,T,U,W,X,Y,Z,a,b,c,d,e,f,g,h,i,j,k,m,n,o,p,q,s,t,u,w,x,y,z"; string[] allCharArray = allChar.Split(',');//拆分成數組 string randomNum = ""; int temp = -1; //記錄上次隨機數的數值，儘量避免產生幾個相同的隨機數 Random rand = new Random(); for (int i = 0; i < NumCount; i++) { if (temp != -1) { rand = new Random(i * temp * ((int)DateTime.Now.Ticks)); } int t = rand.Next(35); if (temp == t) { return CreateRandomNum(NumCount); } temp = t; randomNum += allCharArray[t]; } return randomNum; } //生產圖片 private void CreateImage(string validateNum) { if (validateNum == null || validateNum.Trim() == string.Empty) return; //生成BitMap圖像 System.Drawing.Bitmap image = new System.Drawing.Bitmap(validateNum.Length * 12 + 12, 22); Graphics g = Graphics.FromImage(image); try { //生成隨機生成器 Random random = new Random(); //清空圖片背景 g.Clear(Color.White); //畫圖片的背景噪音線 for (int i = 0; i < 25; i++) { int x1 = random.Next(image.Width); int x2 = random.Next(image.Width); int y1 = random.Next(image.Height); int y2 = random.Next(image.Height); g.DrawLine(new Pen(Color.Silver), x1, x2, y1, y2); } Font font = new System.Drawing.Font("Arial", 12, (System.Drawing.FontStyle.Bold | System.Drawing.FontStyle.Italic)); System.Drawing.Drawing2D.LinearGradientBrush brush = new System.Drawing.Drawing2D.LinearGradientBrush(new Rectangle(0, 0, image.Width, image.Height), Color.Blue, Color.DarkRed, 1.2f, true); g.DrawString(validateNum, font, brush, 2, 2); //畫圖片的前景噪音點 for (int i = 0; i < 100; i++) { int x = random.Next(image.Width); int y = random.Next(image.Height); image.SetPixel(x, y, Color.FromArgb(random.Next())); } //畫圖片的邊框線 g.DrawRectangle(new Pen(Color.Silver), 0, 0, image.Width - 1, image.Height - 1); System.IO.MemoryStream ms = new System.IO.MemoryStream(); //將圖像保存到指定流 image.Save(ms, System.Drawing.Imaging.ImageFormat.Gif); Response.ClearContent(); Response.ContentType = "image/Gif"; Response.BinaryWrite(ms.ToArray()); } finally { g.Dispose(); image.Dispose(); } } }View Code
4、運行效果
5、登陸提交賬號密碼驗證碼的時候驗證
if (ValiCode != Session["ValidateNum"].ToString()){ ... }
二、MVC中使用驗證碼
1、在登陸頁添加輸入驗證碼框和圖片
驗證碼 <input ID="txtValiCode" type="text" style="width:60px;" /> <img ID="ValiCode" src="/Login/CreatevaliImg" style="position:relative;top:4px;" />
2、登陸界面js、點擊驗證碼圖片刷新驗證碼
$(function () { $("#txtValiCode").val(""); $("#ValiCode").click(function () { location.reload(); }); });
3、在controller里添加 CreatevaliImg 方法生產驗證碼，供界面里img url調用
public void CreatevaliImg() { string validateNum = CreateRandomNum(4); CreateImage(validateNum); Session["ValidateNum"] = validateNum; } //生產隨機數 private string CreateRandomNum(int NumCount) { string allChar = "0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F,G,H,I,J,K,O,P,Q,R,S,T,U,W,X,Y,Z,a,b,c,d,e,f,g,h,i,j,k,m,n,o,p,q,s,t,u,w,x,y,z"; string[] allCharArray = allChar.Split(',');//拆分成數組 string randomNum = ""; int temp = -1; //記錄上次隨機數的數值，儘量避免產生幾個相同的隨機數 Random rand = new Random(); for (int i = 0; i < NumCount; i++) { if (temp != -1) { rand = new Random(i * temp * ((int)DateTime.Now.Ticks)); } int t = rand.Next(35); if (temp == t) { return CreateRandomNum(NumCount); } temp = t; randomNum += allCharArray[t]; } return randomNum; } //生產圖片 private void CreateImage(string validateNum) { if (validateNum == null || validateNum.Trim() == string.Empty) return; //生成BitMap圖像 System.Drawing.Bitmap image = new System.Drawing.Bitmap(validateNum.Length * 12 + 12, 22); Graphics g = Graphics.FromImage(image); try { //生成隨機生成器 Random random = new Random(); //清空圖片背景 g.Clear(Color.White); //畫圖片的背景噪音線 for (int i = 0; i < 25; i++) { int x1 = random.Next(image.Width); int x2 = random.Next(image.Width); int y1 = random.Next(image.Height); int y2 = random.Next(image.Height); g.DrawLine(new Pen(Color.Silver), x1, x2, y1, y2); } Font font = new System.Drawing.Font("Arial", 12, (System.Drawing.FontStyle.Bold | System.Drawing.FontStyle.Italic)); System.Drawing.Drawing2D.LinearGradientBrush brush = new System.Drawing.Drawing2D.LinearGradientBrush(new Rectangle(0, 0, image.Width, image.Height), Color.Blue, Color.DarkRed, 1.2f, true); g.DrawString(validateNum, font, brush, 2, 2); //畫圖片的前景噪音點 for (int i = 0; i < 100; i++) { int x = random.Next(image.Width); int y = random.Next(image.Height); image.SetPixel(x, y, Color.FromArgb(random.Next())); } //畫圖片的邊框線 g.DrawRectangle(new Pen(Color.Silver), 0, 0, image.Width - 1, image.Height - 1); System.IO.MemoryStream ms = new System.IO.MemoryStream(); //將圖像保存到指定流 image.Save(ms, System.Drawing.Imaging.ImageFormat.Gif); Response.ClearContent(); Response.ContentType = "image/Gif"; Response.BinaryWrite(ms.ToArray()); } finally { g.Dispose(); image.Dispose(); } }View Code
4、運行效果
5、登陸的時候校驗下 頁面中的輸入內容和 後臺生成的 Session["ValidateNum"] 作校驗
