Form 表单提交功能，jQuery实现

 1   <form name="MYFORM" id="MYFORM">
 2                     <input name="name" size="30" type="text" id="name" class="span12" placeholder="Name" />
 3                     <input name="email" size="30" type="text" id="email" class="span12" placeholder="E-mail Address" />
 4                     <textarea id="message" name="message" class="span12" placeholder="Message" rows="8"></textarea>
 5                     <img src="contact/refresh.jpg" width="25" alt="" id="refresh" />
 6                     <img src="contact/VerifyCode.aspx" alt="点击更换验证码" id="captcha" />
 7                     <br />
 8                     <input name="code" id="code" type="text" id="code" placeholder="Enter Captcha" class="top10" />
 9                     <br />
10                     <input value="提交" type="submit" id="Send" class="btn btn-primary top10" />
11                     <br />
12     </form>

  1  
  2  <script type="text/javascript">
  3 
  4         $(document).ready(function () {
  5 
  6             $(‘#Send‘).click(function () {
  7 
  8                 // name validation
  9 
 10                 var nameVal = $("#name").val();
 11 
 12                 if (nameVal == ‘‘) {
 13 
 14                     $("#name_error").html(‘‘);
 15 
 16                     $("#name").after(‘<label class="error" id="name_error">Please enter your name.</label>‘);
 17 
 18                     return false
 19 
 20                 }
 21 
 22                 else {
 23 
 24                     $("#name_error").html(‘‘);
 25 
 26                 }
 54 
 55                 var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
 56 
 57                 var emailaddressVal = $("#email").val();
 58 
 59                 if (emailaddressVal == ‘‘) {
 60 
 61                     $("#email_error").html(‘‘);
 62 
 63                     $("#email").after(‘<label class="error" id="email_error">Please enter your email address.</label>‘);
 64 
 65                     return false
 66 
 67                 }
 68 
 69                 else if (!emailReg.test(emailaddressVal)) {
 70 
 71                     $("#email_error").html(‘‘);
 72 
 73                     $("#email").after(‘<label class="error" id="email_error">Enter a valid email address.</label>‘);
 74 
 75                     return false
 76 
 77                 }
 78 
 79                 else {
 80 
 81                     $("#email_error").html(‘‘);
 82 
 83                 }
 84 
 85                 // message validation
 86 
 87                 var nameVal = $("#message").val();
 88 
 89                 if (nameVal == ‘‘) {
 90 
 91                     $("#message_error").html(‘‘);
 92 
 93                     $("#message").after(‘<label class="error" id="name_error">Please enter your message.</label>‘);
 94 
 95                     return false
 96 
 97                 }
 98 
 99                 else {
100 
101                     $("#message_error").html(‘‘);
102 
103                 }
104 
105                 var input = $("#code").val();
106                 if (input == ‘‘) {
107                     $("#code_error").html(‘‘);
108                     $("#code").after(‘<label class="error" id="code_error">Please enter validated code.</label>‘);
109                     return false
110                 }
111                 else {
112                     $("#code_error").html(‘‘);
113                 }
165                 $.ajax({ url: ‘ok.aspx?action=ok‘,
166                     type: ‘post‘,
167                     // data: { myname: $("#myname").val(), myage: $("#myage").val(), mynober: $("#mynober").val() },  
168                     //form表单批量提交
                         data: $("#MYFORM").serialize(),
169                     dataType: ‘html‘,
170                     error: function () {
171                         $("#after_submit").html(‘‘);
172 
173                         $("#Send").after(‘<label class="error" id="after_submit">Wrong captcha! Refresh and try again.</label>‘);
174                     },
175                     success: function (data) {
176                         if (data == "ok") {
177 
178                             $("#after_submit").html(‘‘);
179 
180                             $("#Send").after(‘<div class="alert alert-success success" id="after_submit"><button type="button" class="close" data-dismiss                             ="alert">×</button>Thank you! Your message has been sent.</div>‘);

181 
182                             clear_form();
183                             change_captcha();
184                         }
185                         if (data == "error") {
186                             $("#code_error").html(‘‘);
187                             $("#code").after(‘<label class="error" id="code_error">validated code error!</label>‘);
188                             return false
190                         }
193                     }
197                 });
198 
199                 return false;
200 
201             });
203             // refresh captcha
204 
205             $(‘img#refresh‘).click(function () {
206 
207                 change_captcha();
208 
209             });
210 
211             function change_captcha() {
212 
213                 document.getElementById(‘captcha‘).src = "contact/VerifyCode.aspx?" + Math.random();
215             }
216 
217             function clear_form() {
218 
219                 $("#name").val(‘‘);
220 
221                 $("#email").val(‘‘);
222 
223                 $("#message").val(‘‘);
224 
225                 $("#code").val(‘‘);
226 
227             }
228 
229         });     
230 
231     </script>

 1     protected void Page_Load(object sender, EventArgs e)
 2     {
 3         if (!IsPostBack)
 4         {
13             string checkcod = Session["VerifyCode"].ToString();
14             if (Request["action"].ToString() != "")
15             {
17                 string name = Request.Form["name"].ToString();
18                 string email = Request.Form["email"].ToString();
19                 string msg = Request.Form["message"].ToString();
21                 string code = Request.Form["code"].ToString();
22                 if (checkcod == code)
23                 {
24                     Response.Write("ok");
                     //将前台数据更新到数据库中，并返回ok值到前台...
25                     db.Updatedata("insert into srtitle (suser,icontent,datetime,isr,isvid,rcontent,rdatetime,titleid) values(‘" + name.Replace("script", "") + "‘,‘" + msg.Replace("script", "") + "‘,‘" + DateTime.Now.ToShortDateString() + "‘,‘false‘,‘" + email.Replace("script", "") + "‘,‘‘,‘‘,1)");
26 
27                 }
28                 else if (checkcod != code)
29                 {
30                     Response.Write("error");
31                 }
32                 else
33                 {
34                     Response.Write("error");
35                 }
36 
37             }
38 
39         }
40     }

 1  protected void Page_Load(object sender, EventArgs e)
 2     {
 3 
 4         string code = CreateRandomCode(4);//生成随机码
 5         Session["VerifyCode"] = code;//随机码保存
 6         CreateImageonPage(code, this.Context);//生成图片
 7     }
 8     //直接输出图形到页面
 9     private void CreateImageonPage(string code, HttpContext context)
10     {
11         System.IO.MemoryStream ms = new System.IO.MemoryStream();
12         Bitmap image = this.CreatImageCode(code);
13         image.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg);
14         context.Response.ClearContent();
15         context.Response.ContentType = "image/Jpeg";
16         context.Response.BinaryWrite(ms.GetBuffer());
17         ms.Close();
18         ms = null;
19         image.Dispose();
20         image = null;
21     }
22     public static bool CheckCode(string text)
23     {
24         string txt = System.Web.HttpContext.Current.Session["VerifyCode"] as string;
25         return text ==txt;
26 
27     }
28     //创建验证码图片
29     public Bitmap CreatImageCode(string code)
30     {
31         Color backgroundcolor = Color.OrangeRed;
32         int padding = 2;//边框补(默认l像素)
33         int fontsize = 15;//字体大小
34         string fontname = "Arial";//字体
35         int fWidth = fontsize + padding;//字体宽
36         int imgWidth = (int)(code.Length * fWidth) + 4 + padding * 2;//图片宽度
37         int imgHight = fontsize * 2 + 2;//图片高度
38         System.Drawing.Bitmap imge = new System.Drawing.Bitmap(imgWidth, imgHight);//图片对象
39         Graphics gr = Graphics.FromImage(imge);
40         gr.Clear(backgroundcolor);//刷底色
41         int left = 1, top = 2;
42         Font f = null;
43         Brush b = null;
44         //随机字体和颜色的验证码字符
45         for (int i = 0; i < code.Length; i++)
46         {
47             f = new System.Drawing.Font(fontname, fontsize, System.Drawing.FontStyle.Bold);//字体
48             b = new System.Drawing.SolidBrush(Color.White);//白色字体
49             gr.DrawString(code[i].ToString(), f, b, left, top);
50             left += fWidth;
51 
52         }
53         //画一个边框 边框元素为Color.gainsbro
54         gr.DrawRectangle(new Pen(Color.Gainsboro, 0), 0, 0, imge.Width, imge.Height);
55         for (int icount = 0; icount < 10; icount++)
56         {
57             //在随机的位置使用随机的颜色线条和像素
58             Random rand = new Random();
59             int x = rand.Next(imgWidth);
60             int y = rand.Next(imgHight);
61             int x1 = rand.Next(imgWidth);
62             int y1 = rand.Next(imgHight);
63             int x2 = rand.Next(imgWidth);
64             int y2 = rand.Next(imgHight);
65             int red = rand.Next(255); int green = rand.Next(255); int blue = rand.Next(255);
66             Color c = Color.FromArgb(red, green, blue);
67             gr.DrawLine(new Pen(c), new Point(x1, y1), new Point(x2, y2));
68             imge.SetPixel(x, y, c);
69         }
70         gr.Dispose();
71         return imge;
72     }
73     /// <summary>   
74     /// 功能：产生数字和字符混合的随机字符串   
75     /// </summary>   
76     /// <param name="codecount">字符串的个数</param>   
77     /// <returns></returns>   
78     private string CreateRandomCode(int codecount)
79     {
80 
81         // 数字和字符混合字符串   
82         string allchar = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f,g,h,i,j,k,l,m,n";
83         //分割成数组   
84         string[] allchararray = allchar.Split(‘,‘);
85         string randomcode = "";
86 
87         //随机数实例   
88         System.Random rand = new System.Random(unchecked((int)DateTime.Now.Ticks));
89         for (int i = 0; i < codecount; i++)
90         {
91             //获取一个随机数   
92             int t = rand.Next(allchararray.Length);
93             //合成随机字符串   
94             randomcode += allchararray[t];
95         }
96         return randomcode;
97     }