现在的程序中，为了防止用户恶意点击，我们一般都会加上验证，现在比较普遍的是加上图片验证码或者手机短信验证。验证码一般都是防机器不防人，有效的防止了恶意点击。
那么在webform中如何生成动态的图片验证码呢？
首先，我们新建一个ValidateImage.aspx页面，前台页面中写任何代码，在ValidateImage.aspx.cs中加入如下代码：
public partial class ValidateImage : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{ this.CreateCheckCodeImage(RndNum());
}
private string RndNum()
{
int number;
char code;
string checkCode = String.Empty; System.Random random = new Random(); for (int i = ; i < ; i++)
{
number = random.Next();
if (number % == )
code = (char)('' + (char)(number % ));
else
code = (char)('A' + (char)(number % ));
checkCode += code.ToString();
}
Response.Cookies.Add(new HttpCookie("yzmcode", checkCode));
return checkCode;
} /// <summary>向页面生成验证码Gif图片
/// </summary>
/// <param name="checkCode"></param>
private void CreateCheckCodeImage(string checkCode)
{
if (checkCode == null || checkCode.Trim() == String.Empty)
return;
System.Drawing.Bitmap image = new System.Drawing.Bitmap((int)Math.Ceiling((checkCode.Length * 12.5)), );
Graphics g = Graphics.FromImage(image);
try
{
//生成随机生成器
Random random = new Random();
//清空图片背景色
g.Clear(Color.White);
//画图片的背景噪音线
for (int i = ; i < ; 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, y1, x2, y2);
} Font font = new System.Drawing.Font("Arial", , (System.Drawing.FontStyle.Bold | System.Drawing.FontStyle.Italic));
System.Drawing.Drawing2D.LinearGradientBrush brush = new System.Drawing.Drawing2D.LinearGradientBrush(new Rectangle(, , image.Width, image.Height), Color.Blue, Color.DarkRed, 1.2f, true);
g.DrawString(checkCode, font, brush, , );
//画图片的前景噪音点
for (int i = ; i < ; 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), , , image.Width - , image.Height - );
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();
}
}
}
然后在新建一个index.html页面，在页面中添加如下代码：
<script type="text/javascript">
function changeImg() {
$("#imgCheckNo").attr("src", "ValidateImage.aspx?r=" + getRandom());
}
</script>
<img id="imgCheckNo" src="ValidateImage.aspx" style="border-color: #000000; border-width: 1px; border-style: Solid; width: 200px; height: 50px; margin-left: 10px;" onclick="changeImg();" />
记得引用一个jquery脚本库，不然点击图片验证码它是不会刷新的。
这样我们的图片验证码就生成成功了！
因为生成的图片验证码是保存在cookie中的，我们在ASP.NET后台中很容易就能获取到cookie值，那么在js中，怎么才能获取到呢？
<script type="text/javascript">
$("btn").click({
//获取输入框的值
var yenzhen = $("#yanzhen").val();
//获取cookie值
var cookie_val = getCookie("yzmcode");
//截取cookie值后四位
var cookie = cookie_val.substr(cookie_val.length - 4);
//因为cookie中的值字母是大写，所以把输入的值中的字母转换成大写
yenzhen.toUpperCase()
})
//获取cookie值
var allcookies = document.cookie;
//定义一个函数，用来读取特定的cookie值。
function getCookie(cookie_name) {
var allcookies = document.cookie;
var cookie_pos = allcookies.indexOf(cookie_name); //索引的长度
// 如果找到了索引，就代表cookie存在，
// 反之，就说明不存在。
if (cookie_pos != -1) {
// 把cookie_pos放在值的开始，只要给值加1即可。
cookie_pos += cookie_name.length + 1; //这里我自己试过，容易出问题，所以请大家参考的时候自己好好研究一下。。。
var cookie_end = allcookies.indexOf(";", cookie_pos);
if (cookie_end == -1) {
cookie_end = allcookies.length;
}
var value = unescape(allcookies.substring(cookie_pos, cookie_end)); //这里就可以得到你想要的cookie的值了。。。
}
return value;
}
</script>
这样就可以获取到验证码了！