Form 表单提交功能，jQuery实现
浏览数：43 /
时间：2015年06月09日
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 }
注意ok.aspx页面中，前台页删除所有html代码！！仅保留此段<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ok.aspx.cs" %>
验证码页面源码：
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 }
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
