<div> <asp:TextBox runat="server"></asp:TextBox> <%--TextBox-等待输入验证码--%> <asp:Image runat="server" /> <%--Image-显示验证码图片--%> <asp:Button runat="server" Text="提交验证" /> <%--Button-提交进行验证--%> <asp:Label runat="server" Text="验证中..."></asp:Label> <%--Label-显示验证结果--%> </div>
此时验证码为空，不显示任何东西
步骤：
一、给验证码图片控件加一个连接，，此连接是.aspx网页，此网页不需要前台，只需要打开时后台做一个验证码图片展示出来即可
<asp:Image runat="server" ImageUrl="YZM.aspx" />
二、在YZM.aspx后台中制作简单验证码
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Drawing; public partial class YZM : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { Random r = new Random(); //制作“位图”（指定长宽的矩形区域） Bitmap img = new Bitmap(60,30); //准备制作- //设定画布 Graphics g = Graphics.FromImage(img); //输出的字符串 string all = "abcdefghijklmnopqrstuvwsyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; string s = ""; for (int i = 1; i <= 4; i++) { s += all.Substring(r.Next(all.Length),1); } //字符串的字体 Font f=new Font ("微软雅黑",16); //字体的颜色 Brush b=new SolidBrush(Color.Red); //起始位置 PointF p=new PointF (3,3); //进行制作- g.DrawString(s, f, b, p); //进行保存(保存到流中) img.Save(Response.OutputStream,System.Drawing.Imaging.ImageFormat.Png); Response.End(); } }
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Drawing; public partial class YZM : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { Random r = new Random(); //制作“位图”（指定长宽的矩形区域） Bitmap img = new Bitmap(60,30); //准备制作- //设定画布 Graphics g = Graphics.FromImage(img); //输出的字符串 string all = "abcdefghijklmnopqrstuvwsyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; string s = ""; for (int i = 1; i <= 4; i++) { s += all.Substring(r.Next(all.Length),1); } //字符串的字体 Font f=new Font ("微软雅黑",16); //字体的颜色 Brush b=new SolidBrush(Color.Red); //起始位置 PointF p=new PointF (3,3); //进行制作- g.DrawString(s, f, b, p); //进行保存(保存到流中) img.Save(Response.OutputStream,System.Drawing.Imaging.ImageFormat.Png); Response.End(); } }
效果：
三、设置<提交验证>功能
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { btn_verification.Click+=btn_verification_Click; } //<提交验证>按钮点击事件 void btn_verification_Click(object sender, EventArgs e) { string s1 = txt_userYZM.Text; string s2 = Session["YZM"].ToString(); if (s1.ToUpper() == s2.ToUpper()) { Label1.Text = "验证成功！"; } else { Label1.Text = "验证失败！"; } } }
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { btn_verification.Click+=btn_verification_Click; } //<提交验证>按钮点击事件 void btn_verification_Click(object sender, EventArgs e) { string s1 = txt_userYZM.Text; string s2 = Session["YZM"].ToString(); if (s1.ToUpper() == s2.ToUpper()) { Label1.Text = "验证成功！"; } else { Label1.Text = "验证失败！"; } } }
效果：
验证成功自动刷新
四、设置点击验证码切换验证码 - 前端JS