tp5倒计时发送验证码；倒计时60秒触发发送短信

实现效果以及项目背景：接手一个商城项目，因为用到短信发送的地方比较多，找回密码，修改绑定，安全设置等，都用到了短信验证，对每一个操作单独写一个发送短信显然不合适，所以建议这种用一个统一的短信发送模板，即：【签名】您此次操作的验证码为：******；如非本人操作，请忽略。

因为本项目是客户指定的短信供应商，不做多余接入解释，直接跳过发送步骤，另外一篇文章会专门写到我用过的售后服务比较好的短信供应商，如果有用得到的伙伴可以去看看。

废话不多说，步入正题：实现效果

前端html:

<div class="form">
    <div class="list">
        <div class="pull-left list-l">
            <span class="sp1 pull-left">绑定新手机</span>
            <input type="text" class="sp2 pull-left" style="width: 85px" placeholder="请输入新手机号">
        </div>
        <button class="pull-right" onclick="sendMessage()" id="btnSendCode" type="button">发送验证码</button>
    </div>
    <div class="list2">
        <span class="sp1 pull-left">短信验证码</span>
        <input type="text" placeholder="请输入短信验证码" id="msg_code" style="width: 200px">
    </div>
    <div class="list3"><a href="javascript:void(0)" onclick="show_next()">下一步</a></div>
</div>

jquery 触发：

<script>
    function show_next(){
        $msg_code = $("#msg_code").val();
        layer.msg('确定提交吗？提交后登陆账户将更换为新手机', {
            time: 0
            ,btn: ['确定', '取消']
            ,yes: function(index){
                $.post("{:url('home/member/member_tel2')}",{yzm:$msg_code} , function(data){
                    if(data != 1){
                        layer.msg('数据获取有误，请刷新重试');
                    }else{
                        window.location.href='{:url("home/member/member_paw2")}';
                    }
                }, 'json');
            }
        });
    }

    var InterValObj; 
    var count = 60; 
    var curCount;
    function sendMessage() {
        $.post("{:url('home/member/search_phone')}",{get_phone:'yes'} , function(data){
            if(data != -1){
                sendmsg(data);
            }else{
                layer.msg('数据获取有误，请刷新重试');
            }
        }, 'json');
    }

    function sendmsg(phone_num){
        curCount = count;
        $("#btnSendCode").attr("disabled", "true");
        $("#btnSendCode").html("已发送"+curCount + "秒");
        InterValObj = window.setInterval(SetRemainTime, 1000); 
        $.post("{:url('home/common/sendmsg')}",{phone_num:phone_num} , function(data){
            layer.msg('短信发送成功，十分钟内有效');
        }, 'json');
    }

    function SetRemainTime() {
        if (curCount == 0) {                
            window.clearInterval(InterValObj);
            $("#btnSendCode").removeAttr("disabled");
            $("#btnSendCode").html("重新发送");
        }else{
            curCount--;
            $("#btnSendCode").html("已发送"+curCount + "秒");
        }
    }
</script>

jquery备注：发送的时候多了一步获取电话号码，因为我这个系统是用电话号码登录的，所以存了session，用这个不用隐藏域的好处之一在于避免用户恶意修改隐藏域发送骚扰短信，同时可以在服务端做好短信发送验证，避免出现刷短信情况（很难保证有这种低级恶趣味的同行）。

php代码：

public function sendmsg(){
    $post_data = input("post.");
    $send_msg = rand(1000,9999);
    $set_up =  Db::name('setup')->where("id",1)->find();
    $apikey = $set_up['apikey']; 
    $mobile = $post_data['phone_num'];
    $data = array('tpl_id' => $set_up['tpl_id'], 'tpl_value' => ('#code#').'='.urlencode($send_msg), 'apikey' => $apikey, 'mobile' => $mobile);
    $json_data = $this->tpl_send($this->http_curl(),$data);
    $array = json_decode($json_data,true);
    if($array['code'] == 0){
        Cookie::set("message",md5($send_msg),60*10);
        return ['code'=>1,'msg'=>'短信发送成功,十分钟内有效'];
    }else{
        return ['code'=>-1,'msg'=>$array['msg']];
    }
}

发送短信备注：如果做完善点，可以在发送短信那里加一个发送次数判断，此处我跳过，可自行补充。

提交验证代码：

public function password(){
    //找回密码
    $post_data = input("post.");
    if(isset($post_data) && !empty($post_data)){
        $message = Cookie::get("message");
        if($message != md5($post_data['yzm'])){
            return ['code'=>-1,'msg'=>'验证码错误'];
        }else{
            //检查该电话是否注册过
            $check_phone = Db::name("member")->field('phone')->where("phone",$post_data['phone_num'])->find();
            if(!isset($check_phone) || empty($check_phone)){
                return ['code'=>-1,'msg'=>'该手机号码未注册，请重新注册'];
            }else{
                $update_data = [
                    'pwd' => md5(md5($post_data['password'])),
                ];
                $update_effect = Db::name("member")->where('phone',$check_phone['phone'])->update($update_data);
                if($update_effect){
                    return ['code'=>1,'msg'=>'密码修改成功，跳转至登陆页'];
                }else{
                    return ['code'=>-1,'msg'=>'密码修改失败，发生未知错误'];
                }
            }
        }
    }else{
        return $this->fetch('password', ['nav' => 'active']);
    }
}

tp5倒计时发送验证码；倒计时60秒触发发送短信

猜你喜欢