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

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

想要做成的效果

自己做成的效果

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

 

页面代码：

<form id="form1" runat="server">

   <div>

        <ul class="tab">

      <li  id="js-reg-tab-1">邮箱注册</li>

      <li id="js-reg-tab-2">手机注册</li>

     </ul>

   </div>

  <fieldset>

    <div>

      <label for="email">电子邮箱</label>

        <input id="email" name="email" title="请输入您常用的邮箱"/>

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

    </div>

    <div>

      <label for="password">密码</label>

        <input type="password" id="password" name="password" title="6-20位字符，不能使用空格、注册帐号"/>

    </div>

    <div>

      <label for="affirmpassword">确认密码</label>

        <input type="password" id="affirmpassword" name="affirmpassword" title="请再次输入密码."/>

    

    </div>

      <div>

           <label for="Securitycode">验证码</label>

 

          <input id="Securitycode" name="Securitycode"  />

          <span><img id="img1" src="CheckCode.aspx" /></span>

          <a id="a1" style="cursor: pointer; font-size: 12px;"  onclick="newCheckCode()" >看不清，换一个</a> 

          <a></a>

      </div>

      <div>

        <input type="button" id="btn" value="提交" /> 

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

      </div>

  </fieldset>

</form>

 

脚本内容：

<script type="text/javascript">

 

        $(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>

引用文件：

<script src="../../js/jquery-1.8.3.js"></script>

    <script src="../../js/jquery-ui-1.9.2.custom.js"></script>

<link href="../../css/ui-lightness/jquery-ui-1.9.2.custom.css" rel="stylesheet" />

 

 

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();

            }

        }

}

笔记：

<span><img id="img1" src="CheckCode.aspx" /></span>

验证码的生成主要是上面的这句话，用户在加载的页面的时候会自动调用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请求之后会根据其执行的结果来回调到相应的事件当中。