Jquery asp.net注册表单实现校验生成与判断

最近在学习Jquery，然后找了几个案例，比如今天学习的如何开发一个注册的界面。设计的原型是ifeng的。

想要做成的效果

自己做成的效果

上面是自己设置的一个界面，当用户的鼠标移动到相应的文本框时右侧会显示提示框，并且这个页面会生成一个检验码，并且这个界面的校验采用的是Ajax

页面代码：

<div>

</ul>

</div>

<div>

<div id="js-email-error" style="display:none">sdfsad</div>

</div>

<div>

</div>

<div>

</div>

<div>

<a></a>

</div>

<div>

<asp:Button ID="btnOK" runat="server" onclick="btnOK_Click" Text="验证" />

</div>

</fieldset>

</form>

脚本内容：

$(function () {

var tooltips = $("[title]").tooltip({

position: {

my: "left top",

at: "right+5 top-5"

}

});

$("#btn").click(function() {

$.ajax({

type: "post",

url: "Default3.aspx/VerificationCode",

data: "{'code':'" + $("#Securitycode").val() + "'}",

contentType: "application/json; charset=utf-8",

dataType: "json",

success: function (data) {

switch (data.d) {

case 1:

alert("验证码正确！");

break;

default:

alert("验证码错误!");

newCheckCode();

break;

}

error: function (err) {

alert('出错了' + err);

}

});

function trim(str) { //删除左右两端的空格

return str.replace(/(^s*)|(s*$)/g, "");

}

function newCheckCode() {//刷新验证码

$("#img1").attr("src", "CheckCode.aspx"+"?"+Math.random());

}

</script>

CSS代码：

<style>

label {

display: inline-block; width: 5em;

}

fieldset div {

margin-bottom: 1em;

}

fieldset .help {

display: inline-block;

}

.ui-tooltip {

width: 410px;

font-size: 12px;

}

.tab{background:#fff repeat-y right 0; height:38px; border-top:1px solid #e5e5e5; position: relative; width:240px;;}

.tab li{cursor:pointer;

border-left:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5; text-align: center; line-height: 38px; font-size: 16px; float: left; width:119px;}

.tab li.current{font-weight: bold; border-bottom:1px solid #fff;}

/* 表单输入框自动提示 */

.mail_tip {position:absolute;left:76px;top:30px; overflow:hidden;z-index:1; width:268px;height:170px; background:#FFF;border:1px solid #a3d2e7; border-top:none; display:none;padding-top:5px;}

.mail_tip li{width:100%;height:20px;line-height:20px;text-indent:5px; color:#999;cursor:pointer; font-size:12px;font-family:Arial;}

.mail_tip li:hover,.mail_tip li.hover{background:#eee;}

.indexput{z-index: 10;}

.mail_tip li span{ color:#aaa; font-family:"宋体";background:#fff!important; display: block; cursor: default;}

.txt_tips{color: #bbb; float: left; width: 160px;}

.txt_tips_double{line-height:16px;}

.txt_tips_double img{*margin-top:8px;}

.txt_tips_ok,.txt_tips_error,.txt_tips_stop{width:18px; height:30px; display: block;}

.txt_tips_ok{background: url(../images/icon01.gif) no-repeat 0 center;}

.txt_tips_error{background: url(../images/icon02.gif) no-repeat 0 center; width:136px; padding-left:24px; color: #BA2636}

</style>

引用文件：

CheckCode.aspx.cs代码：

namespace wcs

{

public partial class CheckCode : System.Web.UI.Page

{

public static string checkkeyCode = string.Empty;

protected void Page_Load(object sender, EventArgs e)

{

this.CreateCheckCodeImage(GenerateCheckCode());

}

/// <summary>

/// 该类的作用是生成检验码字符

/// </summary>

/// <returns></returns>

private string GenerateCheckCode()

{

int number;

char code;

string checkCode = string.Empty;

System.Random random = new Random();//Random类是随机数生成类

for (int i = 0; i < 5; i++)

{

number = random.Next();

if (number%2 == 0)//如果是偶数生成一个数字

code = (char) ('0' + (char) (number%10));

else//如果是奇数生成一个字母

{

code = (char) ('A' + (char) (number%26));

}

checkCode += code.ToString();

}

//下面的是创建一个Cookie来保存字符

HttpCookie cookies = new HttpCookie("CheckCode");

cookies.Values.Add("CheckCode", checkCode.Trim().ToLower());

cookies.Expires = DateTime.Now.AddMinutes(10);//表示该字符有效时间为十分钟

Response.AppendCookie(cookies);

checkkeyCode = checkCode;

return checkCode;

}

/// <summary>

/// 绘制一个检验图片

/// </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*14.5)), 22);//创建一张绘图对象

Graphics g = Graphics.FromImage(image);//GDI的绘制类

try

{

Random random = new Random();

g.Clear(Color.White);//清除之前生成的内容

//随机在图片区域内绘制线条，主要是干扰用的

for (int i = 0; i < 60; 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.GreenYellow), x1, y1, x2, y2);

}

Font font = new System.Drawing.Font("Verdana", 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 < 150; 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.Red), 0, 0, image.Width - 1, image.Height - 1);

System.IO.MemoryStream ms = new MemoryStream();

image.Save(ms, System.Drawing.Imaging.ImageFormat.Gif);//保存为Ｇif格式进ms

Response.ClearContent();//清除原有的内容

Response.ContentType = "image/Gif";//将当前的输出类型改为图片格式

Response.BinaryWrite(ms.ToArray());//将图片内容进行输出

}

finally

{

g.Dispose();

image.Dispose();

}

笔记：

验证码的生成主要是上面的这句话，用户在加载的页面的时候会自动调用CheckCode.aspx的函数this.CreateCheckCodeImage(GenerateCheckCode());

CheckCode.aspx主要有两个方法CreateCheckCodeImage和GenerateCheckCode

GenerateCheckCode的作用是生成校验码字符

GenerateCheckCode的作用是根据之前生成的字符来创建一个ＧＩＦ的图片，在创建的过程当中获致燥点。‘

当用户点击提交按钮会调用以下语句

$("#btn").click(function() {

$.ajax({

type: "post",

url: "Default3.aspx/VerificationCode",

data: "{'code':'" + $("#Securitycode").val() + "'}",

contentType: "application/json; charset=utf-8",

dataType: "json",

success: function (data) {

switch (data.d) {

case 1:

alert("验证码正确！");

break;

default:

alert("验证码错误!");

newCheckCode();

break;

}

error: function (err) {

alert('出错了' + err);

}

});

上面的代码是为按钮绑定一个click事件，当用户点击的时候调用一个ajax事件，该事件主要是发送一个Post请求(请求的数据为用户输入的校验内容)给一个Webservices服务方法Default3.aspx/VerificationCode来进行校验结果，success和error是两个回调的事件，当用户执行完成ajax请求之后会根据其执行的结果来回调到相应的事件当中。