首页 > 代码库 > 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实现