手机注册发送验证码倒计时简单实现方法

本文主要为大家分享一篇手机注册发送验证倒计时的简单实例。具有很好的参考价值,一起跟随小编过来看看吧,希望对大家有所帮助,希望能帮助到大家。

如下所示:

()这里用的是input做的点击发送验证码<input type="number" class="input" name="mobile" placeholder="手机号" style="border: none"  //页面初始化获取倒计时数字(避免在倒计时时用户刷新浏览器导致倒计时归零) var $getCodeInput = $(".hui_kuang"); var sessionCountdown = sessionStorage.getItem("countdown"); if (!sessionCountdown) {  $(".hui_kuang").val("获取验证码") } else {  $(".hui_kuang").val("重新发送(" + sessionCountdown + ")");  setCode($getCodeInput, sessionCountdown); } //获取验证码 function setTime() {  var remobile = $("#registForm input[name='mobile']").val();  if (!remobile) {   alert("请输入手机号码")   return;  }  if (!(/^1[3|4|5|8][0-9]\d{4,8}$/.test(remobile))) {   alert("请输入有效的手机号码")   return;  } else {   setCode($getCodeInput, 60);  } } //发送验证码倒计时 function setCode($getCodeInput, countdown) {  if (countdown == 0) {   $getCodeInput.attr('disabled', false);//   $getCodeInput.removeAttribute("disabled");   $getCodeInput.val("获取验证码");   sessionStorage.removeItem("countdown");   return;  } else {   $getCodeInput.attr('disabled', true);   $getCodeInput.val("重新发送(" + countdown + ")");   countdown--;  }  sessionStorage.setItem("countdown", countdown);  window.setTimeout(function () {   setCode($getCodeInput, countdown);  }, 1000); }

登录后复制

相关推荐:

使用Angular.js获取验证码倒计时60秒按钮方法

使用Angular.js获取验证码倒计时60秒按钮方法

使用Angular.js获取验证码倒计时60秒按钮方法

以上就是手机注册发送验证码倒计时简单实现方法的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3121031.html

(0)
上一篇 2025年3月29日 17:42:57
下一篇 2025年3月29日 17:45:32

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 如何在uniapp中实现倒计时和闹钟功能

    如何在uniapp中实现倒计时和闹钟功能 一、倒计时功能的实现: 倒计时功能在实际开发中非常常见,可以用于实现各种倒计时功能,如验证码倒计时、秒杀倒计时等。下面通过uniapp框架来介绍如何实现倒计时功能。 在uniapp项目中创建一个倒计…

    2025年5月1日
    000
  • 如何在JavaScript中实现倒计时?

    在javascript中实现倒计时可以使用setinterval、date对象、settimeout等方法。1. 使用setinterval进行基本倒计时。2. 使用date对象和settimeout实现更精确的倒计时。3. 确保清理定时器…

    2025年4月30日
    000
  • Laravel中文验证修改方法详解

    Laravel中文验证修改方法详解 随着Laravel框架的不断发展,越来越多的开发者选择使用Laravel来构建他们的Web应用程序。在开发一个应用程序的过程中,数据验证是一个非常重要的环节,它可以确保用户输入的数据是符合规定的,从而保证…

    2025年4月2日
    200
  • 通过nodejs使用http模块发送请求(详细教程)

    这篇文章主要介绍了nodejs使用http模块发送get与post请求的方法,结合实例形式分析了nodejs基于http模块实现发送get与post请求具体操作技巧,需要的朋友可以参考下 本文实例讲述了nodejs使用http模块发送get…

    编程技术 2025年3月31日
    100
  • 在js中如何实现登录需要滑动验证

    下面我就为大家分享一篇js登录滑动验证的实现(不滑动无法登陆),具有很好的参考价值,希望对大家有所帮助。 js的判断这里是根据滑块的位置进行判断,应该是用一个flag判断 nbsp;html PUBLIC “-//W3C//DTD HTML…

    编程技术 2025年3月31日
    100
  • 在Angular中如何实现验证

    这篇文章主要介绍了angular简单验证功能,涉及angularjs事件响应、正则判定、页面元素属性动态修改等相关操作技巧,需要的朋友可以参考下 本文实例讲述了Angular简单验证功能。分享给大家供大家参考,具体如下: 先来看看运行效果:…

    2025年3月31日
    100
  • 在jQuery中如何使用Validate插件

    下面我就为大家分享一篇jquery validate插件ajax方式验证输入值的实例,具有很好的参考价值,希望对大家有所帮助。 项目中经常会遇到需要后台验证问题,如用户名、用户账号是否存在等。使用jQuery Validate插件可以使用r…

    编程技术 2025年3月31日
    100
  • Laravel5.2使用Captcha生成验证码实现登录方法

    最近有朋友要我帮忙弄一下laravel的验证码登陆,所以稍稍研究了一下。本文主要介绍了laravel5.2使用captcha生成验证码(session巨坑),需要的朋友可以参考下,希望能帮助到大家。 首先,安装laravel就不用在下赘述了…

    编程技术 2025年3月31日
    200
  • PHP程序中的表单验证最佳实践

    表单验证是 web 开发中不可避免的一部分,因为它可以确保用户输入的数据达到最小要求。而 php 是一种非常流行的 web 编程语言,因此,在 php 程序中表单验证的最佳实践是非常值得探讨的。 以下是 PHP 程序中表单验证的最佳实践: …

    编程技术 2025年3月30日
    100
  • 如何使用PHP进行基本的表单验证

    随着互联网的发展,表单验证是任何网站的关键部分。网站上的表单允许用户提交数据,如登录名和密码、电子邮件地址、电话号码等。表单验证是确保这些数据有效且无害的一种方法,从而保护您的站点和用户不受恶意攻击。 本文将介绍如何使用PHP进行基本的表单…

    编程技术 2025年3月30日
    100

发表回复

登录后才能评论