首页 > 代码库 > Form 表单提交功能,jQuery实现
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 false110 }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 =http://www.mamicode.com/="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 =http://www.mamicode.com/="error") {186 $("#code_error").html(‘‘);187 $("#code").after(‘<label class="error" id="code_error">validated code error!</label>‘);188 return false190 }193 }197 });198 199 return false;200 201 });203 // refresh captcha204 205 $(‘img#refresh‘).click(function () {206 207 change_captcha();208 209 });210 211 function change_captcha() {212 213 document.getElementById(‘captcha‘).src = "http://www.mamicode.com/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 else33 {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.gainsbro54 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 }
Form 表单提交功能,jQuery实现
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。