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請求以後會根據其執行的結果來回調到相應的事件當中。