客户端js+html代码

  1. <script type="text/javascript">
  2. var tcode = 0;//定时器返回代码
  3.      //获得验证码
  4. function GetVerifyCodeAction() {
  5. var email = $("#email").val();
  6. if (!checkEmail(email)) {
  7. $("#area_error").addClass("log-tips").show().text(EmailFormatIsFault);//邮箱格式错误
  8. }
  9. else {
  10. $.ajax({
  11. type: "post",
  12. async: false,
  13. url: "/Handler/SendMsgToMail.ashx",
  14. data: { op: 12, email: email },
  15. success: function (result) {
  16. var data = parseInt(result);
  17. switch (data) {
  18. case 1:
  19. $("#area_error").addClass("log-tips").show().text(CheckVerifyCode);//验证码已发送,请注意查收
  20. $("#btnSendCode").removeAttr("onclick");//移除发送验证码的click事件
  21. tcode = setInterval("ReSend()", 1000);//设置定时器,60秒后容许再次发送
  22. break;
  23. case -1:
  24. $("#area_error").addClass("log-tips").show().text(FillEmail);//请输入邮箱
  25. break;
  26. case -2:
  27. $("#area_error").addClass("log-tips").show().text(MailNotReg);//邮箱尚未注册
  28. break;
  29. case -3:
  30. $("#area_error").addClass("log-tips").show().text(OperateException);//操作异常
  31. break;
  32. case -4:
  33. $("#area_error").addClass("log-tips").show().text(OperateException);//操作异常
  34. break;
  35. case -5:
  36. $("#area_error").addClass("log-tips").show().text(OnceMinute);//每分钟只能发送一次
  37. break;
  38. default:
  39. $("#area_error").addClass("log-tips").show().text(OperateException);//操作异常
  40. break;
  41. }
  42. }
  43. });
  44. }
  45. return false;
  46. }
  47.     //点击进入下一步
  48. function GoNext() {
  49. $("#area_error").removeClass("log-tips").text("").hide();
  50. var email = $("#email").val();
  51. if (!checkEmail(email)) {
  52. $("#area_error").addClass("log-tips").show().text(EmailFormatIsFault);//邮箱格式不正确
  53. return false;
  54. }
  55. var vcode = $("#verify").val();
  56. if (vcode == "") {
  57. $("#area_error").addClass("log-tips").show().text(FillVerifyCode);//请输入验证码
  58. return false;
  59. }
  60.         //判断验证码是否正确
  61. $.ajax({
  62. type: "post",
  63. url: "/Handler/Members.ashx",
  64. data: { op: 14, email: email, vcode: vcode },
  65. success: function (result) {
  66. if (result == "-1") {
  67. $("#area_error").addClass("log-tips").show().text(VCodeIsNotAvailable);//验证码已失效
  68. }
  69. if (result == "1") {
  70. window.location = "forgot_password.aspx?email=" + email + "&vcode=" + vcode;
  71. }
  72. }
  73. });
  74. }
  75.      //定时器
  76. function ReSend() {
  77.        var Wait60Second="60秒后重发";
  78. var TotalCount = $("#hf_timecount").val();
  79. TotalCount = TotalCount - 1;
  80. $("#hf_timecount").val(TotalCount);
  81.  
  82. if (TotalCount == 0) {
  83. ReSetSendMail();
  84. }
  85. else {
  86. $("#btnSendCode").text(Wait60Second.replace("60", TotalCount));
  87. }
  88. }
         //重新附加发送邮箱事件
  89. function ReSetSendMail() {
  90. clearInterval(tcode);
  91. $("#hf_timecount").val("60");
  92. $("#btnSendCode").text("获取验证码");
  93. $("#btnSendCode").attr("onclick", "GetVerifyCodeAction()");
  94. }
  95. </script>
    <input id="hf_timecount" value="60" type="hidden" />
    <input type="text" name="email" id="email" />
    <button type="button" id="btnSendCode" onclick="GetVerifyCodeAction()">获取验证码</button>
    <input type="text" name="verify" id="verify" />
    <input type="button" id="btn_next" value="下一步" onclick="GoNext()"/>

  

服务端代码:

  1. /// <summary>
  2. /// 发送邮件
  3. /// </summary>
  4. /// <param name="context"></param>
  5. /// <returns></returns>
  6. public string SendMail(HttpContext context)
  7. {
  8. try
  9. {
  10. if (!string.IsNullOrEmpty(CookiesHelper.getCookie("send_mail_limit")))
  11. {
  12. return "-5";//每分钟只能发送一次
  13. }
  14. string email = context.Request["email"];
  15. if (string.IsNullOrEmpty(email) || !CommonHelper.IsValidEmail(email))
  16. {
  17. return "-1";//传值为空
  18. }
  19. //判断邮件是否存在
  20. BLL.Web.Member bllMember = new BLL.Web.Member();
  21. int mailCount = bllMember.GetCountByEmail(email);
  22. Models.Web.Member member = bllMember.GetModelByEmail(email);
  23.  
  24. if (mailCount == 0 || member == null)
  25. {
  26. return "-2";//不存在
  27. }
  28.  
  29. string vcode = CommonHelper.RandCode(8);
  30.  
  31. Models.Web.VerifyCode model = new Models.Web.VerifyCode();
  32. model.v_code = vcode;
  33. model.v_createdate = DateTime.Now;
  34. model.v_enddate = DateTime.Now.AddHours(2);
  35. model.v_status = 0;
  36. model.v_email = email;
  37.  
  38. BLL.Web.VerifyCode bllVC = new BLL.Web.VerifyCode();
  39. int no = bllVC.Append(model);
  40. if (no > 0)
  41. {
  42. string sendText = "";
  43. string tempPath = context.Server.MapPath("~/EmailTemp/ModifyPwd.txt");
  44.  
  45. using (StreamReader sr = new StreamReader(tempPath))
  46. {
  47. sendText = sr.ReadToEnd();
  48. }
  49. sendText = sendText.Replace("{UserName_CH}", member.PersnalName);
  50. sendText = sendText.Replace("{UserName_EN}", member.PersnalName);
  51. sendText = sendText.Replace("{VCode}", vcode);
  52.  
  53. CommonHelper.SendEmail(email, sendText, Resource.Lang.RetrievePassword);
  54. CookiesHelper.setCookie("send_mail_limit", "SendMail", 1.00);
  55. }
  56. else
  57. {
  58. return "-3";//验证码生成异常,请重试!
  59. }
  60.  
  61. return "1";//成功
  62. }
  63. catch (Exception)
  64. {
  65. return "-4";//异常
  66. }
  67. }

  

获取验证码效果和后台代码(js+html+cs)的更多相关文章

  1. 获取验证码,60秒倒计时js

    <input type="button" id="btn" value="免费获取验证码" /><script type= ...

  2. Android 获取验证码倒计时实现

    Android 获取验证码倒计时实现 2017年10月24日 09:55:41 FBY展菲 阅读数:2002    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.cs ...

  3. [RN] React Native 获取验证码 按钮

    React Native 获取验证码 按钮 效果如图: 实现方法: 一.获取验证码 按钮组件 封装 CountDownButton.js "use strict"; import ...

  4. day80:luffy:短信sdk接入&点击获取验证码&注册功能的实现&Celery实现短信发送功能

    目录 1.短信sdk接入 2.前端点击获取验证码效果 3.注册后端接口实现 4.注册-前端 5.Celery 6.Celery完成短信发送功能 1.短信sdk接入 1.准备工作 1.下载云通讯相关的文 ...

  5. JQuery 获取验证码倒计时

    HTML代码: <button id="btn">点击获取验证码</button> Jquery:代码: $(document).ready(functio ...

  6. selenium+Python3.5获取验证码

    其中PIL为Python Imaging Library,已经是Python平台事实上的图像处理标准库了.PIL功能非常强大,但API却非常简单易用. PIL第三方库安装 pip install PI ...

  7. 用户点击获取验证码之后我们会发送一条信息到用户手机,然后就会出现一个倒计时按钮,很像支付宝手机付款效果了,下面我给大家分享两个js效果

    js代码  代码如下 复制代码 <div class="input">    <input type="button" id="bt ...

  8. js获取验证码 秒表效果(原创)

    <script src="http://code.jquery.com/jquery-latest.js"></script> <input type ...

  9. Angular.js 使用获取验证码按钮实现-倒计时

    获取验证码界面效果如图: 需要实现以下逻辑 按钮不可选 --输入电话号码,按钮可选 --点击获取,进入倒计时,按钮不可选 --倒计时结束,回到初识状态 核心代码: var cd = 60; var t ...

随机推荐

  1. mysql更新(七) MySQl创建用户和授权

    14-补充内容:MySQl创建用户和授权   权限管理 我们知道我们的最高权限管理者是root用户,它拥有着最高的权限操作.包括select.update.delete.update.grant等操作 ...

  2. js-传送file

    这是选择文件的标签 <input type="file" class="add-image-input"> 这是js实现传输文件 var addIm ...

  3. python学习笔记一和PHP的一些对比

    python和php一样是 解释性语言 php和php一样 定义变量不需要指定类型,C语言中的print函数 在python中也是适用的 python编码 适用缩进  4个空格,通常存储为UTF-8模 ...

  4. jQuery ajax - serializeArray() 方法

    定义和用法 serializeArray() 方法通过序列化表单值来创建对象数组(名称和值). 您可以选择一个或多个表单元素(比如 input 及/或 textarea),或者 form 元素本身. ...

  5. yii 执行sql

    sql         $sql = "SELECT ".join(',', $this->search_fields_channel)." FROM {{chan ...

  6. border做三角符号

    用border做三角符号以及其他图形 ;; border-width:20px 10px; border-style:solid; border-color:#ff3300 #ff3300 #ffff ...

  7. Mysql 日期类型 date、datetime、timestamp.

    三种:  date.datetime.timestamp. date : 格式 "YYYY-MM-DD" ,范围 "1000-00-00"到"9999 ...

  8. SpringMvc 文件上传后台处理

    springMVC后台参数是通过MultipartFile类来转化Request的文件上传,但需要apache下fileupload的jar包做支持. 在springMVC的dispatcher-co ...

  9. DrawDib 使用例子<转>

    #include<vfw.h>#pragma comment(lib,"Vfw32.lib") BITMAPINFOHEADER biHeader; memset(&a ...

  10. 9 python 多态与多态类

    1.多态定义 多态指的是一类事物的多种形态 比如动物有多种形态:人,狗,猪 import abc class Animal(metaclass=abc.ABCMeta): @abc.abstractm ...