zoukankan      html  css  js  c++  java
  • 发送短信倒计时(附带数据验证)##干货

    /*获取验证码*/
         $("#sendcode").click(function() {
    //         alert(1)
        var number = $('#tel').val();
        var data = {
          'mobile': number,
          'aim': 1
        };
        if(data.mobile == "" || data.mobile.length != 11) {
          //        alert("请输入手机号")
    
        } else {
    //    console.log(data);
          $.ajax({
            type: "post",
            url: "接口",
            async: true,
            dataType: 'json',
            contentType: "application/json",
            data: JSON.stringify(data),
            success: function(data) {
              console.log(data);
    
              //倒计时    
              var o = $("#sendcode");
              if(data.result.statusCode == 2999) {
                locktime(o);
              } else
              if(data.result.statusCode == 0) {
                time(o);
              } else {
                $("#error").html("手机号已被注册");
              }
         
    
            }
    
          });
        }
      })
      var wait = 60;
    
      function time(o) {
        if(wait == 0) {
          o.removeAttr("disabled");
          o.val("发送短信验证");
          wait = 60;
        } else {
          o.attr("disabled", true);
          o.val("重新发送(" + wait + ")");
          wait--;
          setTimeout(function() {
              time(o)
            },
            1000)
       }
      }
      
       var locks = 5;
    
      function locktime(o) {
        if(locks == 0) {
          o.removeAttr("disabled");
          o.val("发送短信验证");
          locks = 5;
        } else {
          o.attr("disabled", true);
          o.val("帐号已被锁定(" + locks + ")");
          locks--;
          setTimeout(function() {
              locktime(o)
            },
            1000)
        }
      }

    页面结构

    <div class="main-content" style="">
          <div class="warp">
    
            <div class="regist">
              <h2>注册</h2>
              <form id="registForm">
                <div class="form-cont">
                  <input class="isMobilePhone" id="mobile" name="mobile" type="tel" placeholder="请输入手机号" required/>
                </div>
                <div id="errorMassage" class="error-massage"></div>
                <div class="form-cont clearfix">
                  <input class="vCode" name="vCode" type="text" placeholder="请输入验证码" required/><input id="getVcode" class="btn" type="button" value="获取验证码" />
                </div>
                <div class="form-cont">
                  <input id="password" name="password" type="password" placeholder="设置密码" required/>
                </div>
                <!--密码复杂度-->
                <div class="check-password">
                  <span>简单</span><span>一般</span><span>复杂</span>
                </div>
                <div class="form-cont">
                  <input name="lastPassword" type="password" placeholder="确认密码" required/>
                </div>
                <div class="form-cont">
                  <label id="agreement" class="selected-bg" for="che"><input id="che" class="che" type="checkbox" checked="checked" /></label><span>我已阅读并接受 <a id="protocol" href="">《隐私与服务协议》</a></span>
                </div>
                <div>
                  <input id="sunminBtn" class="register-btn" type="button" value="立即注册" />
                </div>
              </form>
            </div>
    
            <div class="imgdown">
              <img src="img/iconbar.png" />
            </div>
          </div>
        </div>
  • 相关阅读:
    .net core
    asp.net core之abp框架
    C#
    c#
    C#
    C#
    C#
    技术术语
    mysql
    006.内测.情景之迷你财务记账
  • 原文地址:https://www.cnblogs.com/liuhappy/p/8874173.html
Copyright © 2011-2022 走看看