美文网首页
手机号码验证发送短信

手机号码验证发送短信

作者: guoss | 来源:发表于2017-11-20 14:30 被阅读0次
    <input type="text" placeholder="输入您的手机号领取优惠券" class="share_p share_p_n" id="sharePhone" data-test="^1[3|4|5|7|8]\d{9}$" />
    <div class="share_code">
     <input type="text" placeholder="输入验证码" class="share_p share_p_c" id="phonecheckCode" name="phonecheckCode">
     <input type="button" value="获取验证码" class="share_p_b" id="phoneSendCode" onClick="sendMessage()"/>
    </div>
    <input type="button" value="我要领取" class="share_g_m" id="share_g_s"/>
    
    var InterValObj;//进行定时器相关操作
    var count=120;//定时事件
    var curCount;
    *发送验证码*
    function sendMessage(){
      curCount=count;
      var sharePhone=document.getElementById('sharePhone');
      var phone=$('#sharePhone').val();
      var testVal=new RegExp(sharePhone.dataset.test);//原生获取属性方法
      if(phone !=''){
       if(testVal.test(phone)){
        $('#phoneSendCode').attr('disabled',true);
        $('#phoneSendCode').val(curCount+'秒重新发送');
        InterValObj=window.setInterval(SetIntTime,1000);
        //时间戳转化
        function timest() {
          var tmp = Date.parse( new Date() ).toString();
          tmp = tmp.substr(0,10);
          return tmp;
        }
        var timeNow=timest();
          var url = "接口?phone="+phone ;
          //向后台发送数据
          $.ajax({
            type:'get',
            headers: {"Sign":timeNow},//拼接相关头部信息
            url: url,
            success:function(data){
            }
          })
        }else{
           //手机号码输入有误
        }
    
      }else{
       //电话号码未输入
      }
    }
    //定时器操作
    function SetIntTime(){
      if(curCount==0){
        window.clearInterval(InterValObj);
        $('#phoneSendCode').removeAttr("disabled");
        $("#phoneSendCode").val("重新发送");
          code='';
      }else{
        curCount--;
        $("#phoneSendCode").val(curCount+'秒重新发送');
      }
     }
    //验证码验证
    $('#share_g_s').on('click', function () {
      var phonecheckCodeVal = $('#phonecheckCode').val();
      var phone = $('#sharePhone').val();
      if (phone == "")
      {
       //手机号码是空
        return;
      }
      if (phonecheckCodeVal == "") {
       //验证码是空
        return;
      }
      var sharePhone = document.getElementById('sharePhone');
      var testVal = new RegExp(sharePhone.dataset.test);
      if (!testVal.test(phone))
      {
        //手机号码错误
        return;
      }
      var url = 接口 + phone+验证码;
      $.ajax({
        url: url,
        type: 'get',
        success: function (data) {
        if (data.retCode == 0) {
         //成功
        } else {
        //验证码错误
        },
        error: function (msg)
        {
          alert(JSON.stringify(msg))
        }
       })
    })
    

    相关文章

      网友评论

          本文标题:手机号码验证发送短信

          本文链接:https://www.haomeiwen.com/subject/avdvvxtx.html