1.原理：image src=aspx页,aspx页负责验证码图片生成
aspx生成验证码之后存在 cookie["yanzhengma"]中
客户端点击登陆,从cookie中读出验证码,检查与输入的是否一致.
js代码
/*校验用户名密码 触发:点击登录按钮 */ function checkUsrPsw() { var userName=document.getElementById("userName").value; var passWord=document.getElementById("passWord").value; if(document.getElementById("userName").value==""){alert("用户名不能为空");return;} if(document.getElementById("passWord").value==""){alert("密码不能为空");return;} var checkCode=getCookie("yzmcode"); if(checkCode.toLowerCase()!=document.getElementById("inpCheckCode").value.toLowerCase()){alert("验证码不正确");return;} var pAjax=new ajax(); var url=encodeURI("AddedHandlers/Login.ashx?type=login¶s="+userName+","+passWord); pAjax.post(url,null,false, function(info){ var status=info.responseText; if(status !="success"){alert(status);} else{ location.href="index.htm";} }); } /*刷新验证码 */ function changeCheckCode() { var i = Math.random(); document.getElementById("imgCheckCode").src="aspxPages/imagecode.aspx?i="+i;//刷新img } /*获取cookie */ function getCookie(c_name) { if (document.cookie.length>0) { c_start=document.cookie.indexOf(c_name + "=") if (c_start!=-1) { c_start=c_start + c_name.length+1 c_end=document.cookie.indexOf(";",c_start) if (c_end==-1) c_end=document.cookie.length return unescape(document.cookie.substring(c_start,c_end)) } } return "" }
html
<td><input name="" id="inpCheckCode" type="text" class="text_bgs" /> <a href="#" class="yzm_img"><!--<img src="images/code_img.jpg" border="0" width="71" height="23" />--> <img src="aspxPages/imagecode.aspx" alt="验证码" id="imgCheckCode" onclick ="changeCheckCode()" title="看不清楚？点击换一个验证码"/> </a></td>
aspx代码
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Drawing.Design;
using System.Drawing;
public partial class _Default : 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 = 0; i < 4; i++)
{
number = random.Next();
if (number % 2 == 0)
code = (char)('0' + (char)(number % 10));
else
code = (char)('A' + (char)(number % 26));
checkCode += code.ToString();
}
Response.Cookies.Add(new HttpCookie("yzmcode", checkCode));
return checkCode;
}
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)), 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, y1, x2, 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(checkCode, 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();
}
}
}
aspx页面
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="imagecode.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> </form> </body> </html>
二、设置窗体鼠标样式
document.body.style.cursor ="crosshair";
document.body.style.cursor ="default";
三、document.links 获取页面内所有链接
var links=document.links; var arNames=[]; for(var i in links) { arNames.push(links[i]); } for(var i in arNames){ document.write(arNames[i]); }
使用方法：使用firefox的fireBug插件, 在sina首页运行
四、js onchange事件, try throw catch进行表单验证
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>无标题页</title> <script type="text/javascript" > /*(1)失去焦点 (2)内容已经改变 同时满足(1),(2)触发onchange ------- throw:程序流到catch(e) --------- carch(e) :e可为任意变量名 */ function checkInfo(id){ try{ if(id=="usrName"){ if(document.getElementById(id).value==""){//throw，程序流直接到catch throw "用户名不能为空"; } if(document.getElementById(id).value.length>20){ throw "用户名长度不能超过20"; } } else if(id=="psw"){ if(document.getElementById(id).value==""){ throw "密码不能为空"; } if(document.getElementById(id).value.length>20){ throw "密码长度不能超过20"; } if(isNaN(document.getElementById(id).value)){ throw "密码必须是数值"; } } } catch(e){//任意变量名 alert(e); } } </script> </head> <body> <div> 用户名<input type="text" id="usrName" onchange ="checkInfo(this.id)"/><br /> 密 码<input type="text" id="psw" onchange ="checkInfo(this.id)"/> </div> </body> </html>
五、js 屏蔽网页内所有图片;
var images=document.images; for(var i in images){ images[i].style.visibility="hidden"; }
实验方法：firebug,在sina主页上用；
效果：iframe中的图片无法去除