前端短信验证码60秒只能点击一次怎么实现? 10C

图片说明



      <ul class="sign_up_list">
            <li class="newinput" ng-show="show_signup_code">
              <span class="input-text">
                  姓名:
              </span>
              <input type="text" placeholder="姓名" name="nickname" class="nickname ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required" style="">
          </li>
          <li class="newinput" ng-show="show_signup_code">
              <span class="input-text">
                  手机号码:
              </span>
              <input type="text" placeholder="手机号码" name="username" class="username ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required" style="">
          </li>
             <li class="newinput input_iphone_code">
              <span class="input-text">
                  验证码:
              </span>
              <input type="text" placeholder="短信验证码" name="phonecode" class="phonecode ng-pristine ng-valid ng-empty ng-touched" style="">
              <span class="code_btn ng-binding"  onclick ="return get_svg();">
                  获取验证码
              </span>
          </li>

          <li class="newinput">
              <span class="input-text">
                  密码:
              </span>
              <input type="password" placeholder="密码" name="upwd" required="" class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required" style="">
          </li>
          <li class="newinput">
              <span class="input-text">
                  确认密码:
              </span>
              <input type="password" placeholder="确认密码" name="upwd2" required="" class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required" style="">
          </li>
          <li class="newinput">
              <span class="input-text">
                  推荐码:
              </span>
              <input class="sign_code ng-pristine ng-untouched ng-valid ng-empty" {if $oid} value="{$oid}" readonly="readonly" {/if} placeholder="推荐码" name="oid" style="">
          </li>
                      <!--<div>
            <input type="checkbox" name="agreement" checked="checked" id="agreement">
            <a>点击注册即同意<a href="javascript:;" id="about">《用户协议》</a></a></input>
          </div>-->
      </ul>

      <button class="newbutton sign_up_btn" onclick="return checkform(this.form);" >
          注册登陆
      </button>

  </div>
0

9个回答

调用短信API ,应该交给后端来完成,前端提交即可。

0

就是想简单的在按钮上限制

0
qq_39196400
K beasts 按钮可以暂时禁用,disabled 属性 ,如果是绑定的话,就在代码上判断
10 个月之前 回复
qq_39196400
K beasts 60s重新获得,保存上一次提交的时间,或者后端完成cookie session, 前端写倒计时
10 个月之前 回复

如果你服务器端不判断,仅仅前端判断,那么后果很悲惨。小学文化程度的都可以突破你的限制。

0
              <span class="code_btn ng-binding"  onclick="return getCode();">
                  获取验证码
              </span>
<script type="text/javascript">
function getCode() {
    var time = localStorage.retime;
    var t = new Date().getTime()/1000;
    if (time===undefined || t-time>=60) {
        localStorage.retime = t;
        return get_svg();
    } else {
        alert("短信验证码60秒只能点击一次。\n在"+Math.ceil(60-(t-time))+"秒之后可以再次点击。");
    }
}
</script>

0
function time(){
    var phone_no = $("#phone").val();
    var unique = $('.unique').attr('ind');
    $.ajax({
        url:"{:U('Member/getVerifyCode')}",
        dataType:"json",
        type:"post",
        data:{'phone_no':phone_no,'unique':unique},
        success:function(data){
            if(data.errorcode == 0){
                // alert(data.message);
                times =60;
                var timer = setInterval(CountDown,500);
                function CountDown() { //开启计时器
                    $('.input-box #getPhoneCode').html(times + "s后重试").attr('disabled', 'disabled').css({
                            "color" : "#8590a6",
                            "background": "#ccc",
                            "opacity" : 0.5
                         });
                     times--; 
                    if (times <= 0) {
                        $('.input-box #getPhoneCode').html("重新获取").css("opacity",1);
                        $('.input-box #getPhoneCode').removeAttr('disabled');
                        clearInterval(timer);
                        times = 60;     
                    }
                }
            }else{
                alert(data.message);
                window.location.reload();
            }
        }
    })
}
0

点击后进行事件的解绑操作,等到时间一过就重新进行事件的绑定就行了

0

var num = 0;
var t1 = setInterval(function(){
num++;
if(num==60){
这里写上disabled为false就好了
clearInterval(t1);
}
},1000)

0

    function get_svg($this){
        var url = '<?php echo $this->genurl('your url'); ?>';
        var phone = $('.phone_num').val();
        $.ajax({
            url:url,
            type:'POST',
            data:{phone:phone},
            success:function(res_data){
              startCountDown(61);
            }
        });
    }
    var time = ~~window.name;
    if(time >= 1){
        startCountDown(time);
    }
    function startCountDown(time){
        var $attachBlock = $(".weui-vcode-btn");
        $attachBlock.addClass('disabled');
        window.name = time;
        window.itv = setInterval(function(){
            if(window.name >= 1){
                $attachBlock.text(window.name + '秒后重新发送');
                window.name--;
            }else{
                $attachBlock.html('获取验证码');
                $attachBlock.removeClass('disabled');
                //清除定时器
                window.clearInterval(itv);
            }
        },1000);
    }

0

用户点击后,按钮上会出现60秒倒数计时,用户再次点击倒计时如果大于0就不处理,提示用户多少秒后才可以重发就可以了。倒计时为0的时候就可以重新发送验证码。那么为了防止用户刷短信,都会设置同一个手机号码验证码一天可以发多少次。如果超出范围就等明天吧!

-1
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
js实现发送短信验证码后60秒倒计时
js方法和jquery方法实现60秒倒计时
jQuery响应菜单插件PgwMenu
添加jquery库,pgwmenu.min.js以及样式文件 1 2 3 link rel="stylesheet" type="text/css" href="pgwmenu.min.css"/> script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">scri
使用Jquery实现获取短信验证码60秒倒计时
现在使用手机号+验证码的方式注册账号已经成为一种必备功能,当我们输入手机号点击发送验证码按钮后,按钮应该不可被再次点击,并开始倒计时,倒计时结束后才能再次点击。这一个可以借助某些插件实现,但其实使用Jquery也可以非常容易实现。假设我们使用button作为发送按钮: &amp;lt;button type=&quot;button&quot; name=&quot;button&quot;&amp;gt;点击获取验证码&amp;lt;/button&amp;gt...
tp5倒计时发送验证码;倒计时60秒触发发送短信
       实现效果以及项目背景:接手一个商城项目,因为用到短信发送的地方比较多,找回密码,修改绑定,安全设置等,都用到了短信验证,对每一个操作单独写一个发送短信显然不合适,所以建议这种用一个统一的短信发送模板,即:【签名】您此次操作的验证码为:******;如非本人操作,请忽略。        因为本项目是客户指定的短信供应商,不做多余接入解释,直接跳过发送步骤,另外一篇文章会专门写到我用过...
点击发送短信验证码按钮后,倒计时60秒
在注册或登录某些网站的用户时,常常会遇到一些发送短信验证码的功能,点击发送按钮后会出现60秒倒计时。 代码实现如下: //60秒之后获取验证码 var wait=60; function time(obj) { if (wait == 0) { obj.removeAttribute("disabled"); obj.
JS实现button点击之后60秒后才可以再次点击-适用获取验证码发送短信等
&amp;lt;!DOCTYPE HTML&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;title&amp;gt;JS实现button点击之后60秒后才可以再次点击&amp;lt;/title&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot;&amp;gt; &amp;lt;meta name=&quot;viewport&quot; content=&quot;wid
Angularjs 验证码60秒发送
Angularjs发送验证码 html部分直接任意标签ng-bind值绑定为description即可
发送短信验证码后60秒倒计时
jquery实现的发送短信验证码后60秒倒计时功能,完整实例可到http://smsow.zhenzikj.com/doc/sdk.html 下载&quot;注册验证码&quot;的demo。 直接下载: java版: http://smsow.zhenzikj.com/demo/download.html?fileName=zhenzisms_java_demo php版: http://smsow.zhenz...
Html 手机端-前端登记简单弹窗布局,验证码60秒倒计时【一】
适用于基础积累,最基础的div+css弹窗布局,以及倒计时 1、position设置relative和absolute的灵活位置布局 2、以及弹窗遮罩层和内容的布局
短信验证码优化之60s内是否重复发送短信
# coding=utf-8from rest_framework import serializersfrom django_redis import get_redis_connectionclass ImageCodeCheckSerializer(serializers.Serializer):    '''图片验证码序列化器'''    # 定义待校验的字段,定义的字段名字必须和外界传入...
angularjs 验证码60秒倒计时
angularjs 验证码60秒倒计时
jQuery实现发送短信验证码后60秒倒计时
var countdown=60; function settime(obj) { if (countdown == 0) { obj.removeAttribute("disabled"); obj.value="免费获取验证码"; countdown = 60; return; } else {
微信小程序点击发送短信验证(60秒倒计时)
wxml:60秒倒计时点击发送 {{count}}秒//js里面绑定点击发送事件,sendMessageCode:function(e){ console.log(e); let that = this; that.setData({ code:false }) that.countdown(); },countdown:function(){ let second = 60; let that
React 实现验证码倒计时功能
React 实现验证码倒计时功能 export default class Register extends React.Component { constructor(props) { super(props) console.log(props) this.state = { count: 60, // 秒数初始化为60秒 liked:...
android中获取验证码后出现60秒的倒计时
很简单,只需要两步: 第一步: 新建一个类继承CountDownTimer 第二步:给按钮设置点击事件 全部代码如下 public class MainActivity extends Activity { private TimeCount time; private Button btnGetcode; @Override protec
vue简单实现发送验证码倒计时
&amp;lt;span v-show=&quot;show&quot; @click=&quot;getCode&quot;&amp;gt;获取验证码&amp;lt;/span&amp;gt;&amp;lt;span v-show=&quot;!show&quot; class=&quot;count&quot;&amp;gt;{{count}} s&amp;lt;/span&amp;gt;data(){  return {   show: true,   count: '',   timer: null
ajax接收手机验证码,倒计时60秒,并进行验证判断
register.html: &amp;lt;input type=&quot;text&quot; placeholder=&quot;请输入手机号&quot; class=&quot;inp&quot; name=&quot;uphone&quot; id=&quot;uphone&quot; style=&quot;width: 50%;&quot;&amp;gt; &amp;lt;input type=&quot;button&quot; name=&quot;but&quot; id=&q
vue获取手机验证码60秒倒计时,不能点击按钮
vue获取手机验证码60秒倒计时,不能点击按钮export const resend = element => { console.log(element) var num = 60 var timer = setInterval(function () { num-- element.innerHTML = num + '秒后重新获取' element.styl
vue获取验证码以及倒计时60秒方法
完整的获取验证码方法,上干货。 &lt;template&gt; &lt;div class="login-content"&gt; &lt;van-cell-group&gt; &lt;van-field label="手机号" type="tel" v-model="phone" :error="phoneError &amp;&amp; !phone" m...
android 短信验证码倒计时60秒
项目中用到了获取短信的倒计时功能 拿出来跟大家分享一下  直接上代码case R.id.btn_pwd: if ( TextUtils.isEmpty(phone) ){ LocalUtils.ToastMessage(DBNPaisongApp.appcontext, getResources().getString(R.string.phone)); r...
vue 验证码倒计时60s
vue 验证码倒计时
jQuery实现表单验证 点击验证码,倒计时60秒
当用户单击“获取验证码”按钮后,会从59秒开始计时。显示效果图HTML部分代码:&amp;lt;a class=&quot;tableText fr&quot; href=&quot;#&quot;&amp;gt;获取验证码&amp;lt;/a&amp;gt;jQuery代码:$(&quot;.tableText&quot;).click(function () { var time = 60; var timer = setInterval(function(){ ...
php短信验证码60秒时间限定
我们在实际使用短信验证码的时候,经常会因为各种原因,收不到短信,那么用户就会再重新请求一条,但是呢,一般的短信验证肯定是有时间间隔的,这样做,第一是为了防止恶意点击,一直发验证码,导致验证码消耗量巨大,二是担心心急的用户,两三秒没收到,就马上点了,这下可能一下子要来好几条,对用户来说也是一种困扰,所以我想分享一下我刚做的这个功能,是用的互亿无线的短信接口,因为毕竟简单,客服也不错的,蛮耐心。 好了...
Rxjava实现获取验证码60秒倒计时效果
/** * 开始计时 */ public static void startTime(final TextView tvGetCode) { final long codeTimes = 60; Observable.interval(0, 1, TimeUnit.SECONDS) .take(codeTimes - 1) .m...
Vue实现获取验证码倒计时
这篇文章主要为大家介绍了如何简单实现vue验证码60秒倒计时功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下HTML部分:&amp;lt;span v-show=&quot;show&quot; @click=&quot;getCode&quot;&amp;gt;获取验证码&amp;lt;/span&amp;gt;&amp;lt;span v-show=&quot;!show&quot; class=&quot;count&quot;&amp;gt;{{count}} s&amp;lt;/span&a
JS实现注册登录发送短信验证码动态显示60S倒计时完整案例
通常在web项目中都会遇到账户注册或者忘记密码时需要发送短信验证码的功能,虽然说这种功能很常见,但是实际开发过程中很多人还会遇到不少坑。笔者经过整理把最近项目中的用到的这个发送短信验证码动态显示60S倒计时的完整实现过程分享给广大开发者朋友。 1、页面发送短信验证码的表单 &amp;lt;div class=&quot;form-group&quot;&amp;gt; &amp;lt;div class=&quot;col-xs-6...
JQ实现验证码倒计时60s--前端案例
本文主要介绍setInterval定时器实现获取验证码倒计时60s 按钮点击前 按钮点击后 1.html Tips:html页面主要的是通过onclick=”sendCode(this)” <button type="button" class="btn-common-100p code-btn" onclick="sendCode(this)">获取验证码</button> 2.封装的
Android 实现点击按钮获取验证码 60秒后重新获取效果
package com.example.countdowntimer; import android.os.Bundle; import android.os.CountDownTimer; import android.app.Activity; import android.graphics.Color; import android.view.Menu; import an
前端---div的60秒倒计时
直接复制可用(其中,更改过一些代码) 文档标题 获取验证码 document.getElementById("code").onclick= function(){ secs = 60; // 设置多少秒 wait = secs * 100; document.getElementById("code").disabled =true; for(i=1;i<=(
JS获取短信验证码button的定时重新发送
HTML: 短信验证码 JS: //"获取短信验证码"  $('#getCode').unbind('click').click(function (event){ event.preventDefault(); time(this); }); //获取短信验证码 var wait=60; function time(o) { if (wait == 0) {
短信验证码60秒倒计时
js代码 //倒计时     function load(){         var countdown=60;          function sendemail(){             var obj = $(&quot;.word-time&quot;);             settime(obj);         }         function settime(obj) { //发...
仿手机收验证码,60秒倒计时,倒计时中不可点击,倒计时结束重新可以点击
项目中用到的,防止以后忘记了,先留着 demo下载地址 http://download.csdn.net/detail/dl10210950/9646940 package com.duanlian.countdowndemo; import android.os.Bundle; import android.os.Handler; import android.support.v7.app
关于短信60秒防止刷新问题 纯思路
看到了网络上很多把发送短信60 防止刷新的办法。哥们今天也遇到了,然后参照网上的思路自己总结如下,希望给下次遇到的跟我一样的童鞋一点帮助。 思路如下:    1.当点击发送按钮的时候需要改变按钮的变化状态,就是所谓的剩余时间    2.为防止点击在倒计时的时间内再次点击,需要给点击按钮加上disable属性  attr(disabled,true)    3.为防止刷新需要把时间存进coo
js 获取验证码倒计时
点击通过手机或邮箱获取验证码,点击之后进入手机验证码或者邮箱验证码获得的页面,验证码已经发出。需要在页面上出现倒计时,可参照如下代码。 [code=&quot;java&quot;] var wait=60; var logNum = Math.floor(Math.random() * 60 + 1); function time(o,num) { if (wait == 0) { ...
springSecurity csrf ajax
html设置 ajax : var token = $("meta[name='_csrf']").attr("content"); var header = $("meta[name='_csrf_header']").attr("content");  $.ajax({           url: "./deleteRes",
Vue实现发送短息60秒倒计时
Vue实现发送短息60秒倒计时 Vue实现注册账号时,发送短信60秒倒计时功能,并进行手机号校验的Demo案例,如果能帮到您,我感到非常荣幸,废话不多说,直接上干货, 首先来一个测试页面,引入Vue.js,及基本格式 &amp;lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta h...
js实现手机验证码发送倒计时60秒无视页面刷新
pageEncoding="UTF-8"%> Document src="http://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"> --> --> 找回密码 --> style="backgrou
vue简单实现手机验证码60秒倒计时功能
&amp;lt;template&amp;gt; &amp;lt;span v-show=&quot;show&quot; @click=&quot;getCode&quot;&amp;gt;获取验证码&amp;lt;/span&amp;gt; &amp;lt;span v-show=&quot;!show&quot; class=&quot;count&quot;&amp;gt;{{count}} s&amp;lt;/span&amp;gt; &amp;lt;/template&amp;gt;
用js实现只能点击一次的按钮的功能
有时候需要用到,网页中的提交表单按钮,让用户只能点一次,以避免重复提交表单。 <a href="javascript:void(0);" onclick="this.innerHTML='提交中';this.onclick='';this.removeAttribute('href')">按钮
短信API随机验证码加60秒后重新发送短息验证码
短信API随机验证码加60秒后重新发送短息验证码 JS /* 短信验证码 */ $(&amp;quot;#fasongyanzhengma&amp;quot;).click(function () { /* 短信验证发送的随机数 */ var Num=&amp;quot;&amp;quot;; for(var i=0;i&amp;amp;lt;6;i++) { Num+=Math.floor(Math.random()*10); ...