这个代码是提交验证码的代码,其实验证码就是一个图片,只需要两个属性就可以了:id属性和地址属性:地址是Handlers/ValidateCode.ashx,Handlers是文件夹,
1 <tr> 2 <td>验证码：</td> 3 <td> 4 <input type="text" id="validateCode" class="form-control" /><img id="validateImg" src="Handlers/ValidateCode.ashx" /> 5 </td> 6 </tr>
1、当我们点击验证码的时候会更换验证码表达式是:
其中b是变量名(随便)+数学函数中的随机数
数学中的随机数是Math.random()
1 $(function () { 2 $("#validateImg").click(function () { 3 $(this).attr("src", "Handlers/ValidateCode.ashx?b=" + Math.random()); 4 }); 5 });
3、在一般处理程序中判断输入的验证码的值,是否和验证码图片上显示的值一致,判断是否是一致的用如下代码
1 //这个变量的意思是验证码中显示的值 2 string checkCodeServer = context.Session["CheckCode"].ToString(); 3 //判断输入的值是否等于验证码中显示的值 4 //如果不等于那么返回-1 5 if (checkCode.ToUpper() != checkCodeServer) { 6 context.Response.Write("-1"); 7 return;
4、验证码就到此结束了
5、总结
HTML代码
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <link href="Content/bootstrap-3.3.7/css/bootstrap.css" rel="stylesheet" /> 7 <script src="Content/jquery-3.1.1.js"></script> 8 <script> 9 10 function saveData() { 11 debugger; 12 var name = $("#txtName").val(); 13 var sex = $("input[name='sex']:checked").val(); 14 var age = $("#txtAge").val(); 15 var checkCode = $("#validateCode").val(); 16 var obj = { 17 Name: name, 18 Sex: sex, 19 Age: age, 20 CheckCode: checkCode 21 }; 22 23 $.ajax({ 24 url: "Handlers/Add.ashx", 25 type: "post", 26 data: obj, 27 dataType: "text", 28 success: function (responseText, status, xhr) { 29 debugger; 30 if (parseInt(responseText) == 1) { 31 alert("添加成功"); 32 location.href = "StudentList.html"; 33 } 34 else if (parseInt(responseText) == -1) { 35 debugger; 36 alert("验证码输入错误"); 37 $("#validateCode").focus(); 38 } 39 else { 40 alert("添加失败"); 41 } 42 }, 43 error: function (req, status, xhr) { 44 debugger; 45 alert("发生错误了,错误信息：" + req); 46 } 47 48 }); 49 } 50 51 $(function () { 52 53 $("#validateImg").click(function () { 54 $(this).attr("src", "Handlers/ValidateCode.ashx?b=" + Math.random()); 55 }); 56 }); 57 58 59 function Back() 60 { 61 location.href = "StudentList.html"; 62 } 63 64 </script> 65 </head> 66 <body> 67 <table class="table table-bordered" style="width:500px;margin:0 auto; margin-top:30px;"> 68 <tr> 69 <td>学生姓名：</td> 70 <td> 71 <input type="text" id="txtName" class="form-control" /> 72 </td> 73 </tr> 74 <tr> 75 <td>学生性别：</td> 76 <td> 77 <input type="radio" name="sex" value="男" />男 78 <input type="radio" name="sex" value="女" />女 79 </td> 80 </tr> 81 <tr> 82 <td>学生年龄：</td> 83 <td> 84 <input type="text" id="txtAge" class="form-control" /> 85 </td> 86 </tr> 87 <tr> 88 <td>验证码：</td> 89 <td> 90 <input type="text" id="validateCode" class="form-control" /><img id="validateImg" src="Handlers/ValidateCode.ashx" /> 91 </td> 92 </tr> 93 <tr> 94 <td></td> 95 <td> 96 <input type="button" class="btn btn-warning" id="btnSubmit" value="保存" onclick="saveData()" /> 97 98 <input id="btnBack" type="button" value="返回" class="btn btn-default" onclick="Back()"/> 99 </td> 100 </tr> 101 </table> 102 103 </body> 104 </html>
script代码
1 <script> 2 3 function saveData() { 4 debugger; 5 var name = $("#txtName").val(); 6 var sex = $("input[name='sex']:checked").val(); 7 var age = $("#txtAge").val(); 8 var checkCode = $("#validateCode").val(); 9 var obj = { 10 Name: name, 11 Sex: sex, 12 Age: age, 13 CheckCode: checkCode 14 }; 15 16 $.ajax({ 17 url: "Handlers/Add.ashx", 18 type: "post", 19 data: obj, 20 dataType: "text", 21 success: function (responseText, status, xhr) { 22 debugger; 23 if (parseInt(responseText) == 1) { 24 alert("添加成功"); 25 location.href = "StudentList.html"; 26 } 27 else if (parseInt(responseText) == -1) { 28 debugger; 29 alert("验证码输入错误"); 30 $("#validateCode").focus(); 31 } 32 else { 33 alert("添加失败"); 34 } 35 }, 36 error: function (req, status, xhr) { 37 debugger; 38 alert("发生错误了,错误信息：" + req); 39 } 40 41 }); 42 } 43 44 $(function () { 45 46 $("#validateImg").click(function () { 47 $(this).attr("src", "Handlers/ValidateCode.ashx?b=" + Math.random()); 48 }); 49 }); 50 51 52 function Back() 53 { 54 location.href = "StudentList.html"; 55 } 56 57 </script>
一般处理程序代码:ashx
1 using BLL; 2 using Model; 3 using System; 4 using System.Collections.Generic; 5 using System.Linq; 6 using System.Web; 7 using System.Web.SessionState; 8 namespace BaWei.Unit15Demo.UI 9 { 10 /// <summary> 11 /// Add 的摘要说明 12 /// </summary> 13 public class Add : IHttpHandler,IRequiresSessionState 14 { 15 16 public void ProcessRequest(HttpContext context) 17 { 18 context.Response.ContentType = "text/plain"; 19 20 string name = context.Request["Name"]; 21 string sex = context.Request["Sex"]; 22 string age = context.Request["Age"]; 23 string checkCode=context.Request["CheckCode"]; 24 25 //这个变量的意思是验证码中显示的值 26 string checkCodeServer = context.Session["CheckCode"].ToString(); 27 //判断输入的值是否等于验证码中显示的值 28 //如果不等于那么返回-1 29 if (checkCode.ToUpper() != checkCodeServer) { 30 context.Response.Write("-1"); 31 return; 32 } 33 34 Student stu = new Student(); 35 stu.Name = name; 36 stu.Sex = sex; 37 stu.Age = Convert.ToInt32(age); 38 39 int rowCount = BLLStudent.Insert(stu); 40 41 42 context.Response.Write(rowCount.ToString()); 43 44 45 //context.Session["aaa"] = 123; 46 } 47 48 public bool IsReusable 49 { 50 get 51 { 52 return false; 53 } 54 } 55 } 56 }