1、前端頁面主要程式碼

這裡點擊發送驗證碼按鈕通過ajax將相關資訊傳到後端getSms方法中。

<form class="form-horizontal form-signin" method="post" action="{:url('register/forget')}">
        <div class="page-header">
            <h1 class="text-center"><small>Ustate忘記密碼</small></h1>
        </div
 
>

        <div class="form-group">
            <label for="mobile" class="sr-only">Mobile</label>
            <input type="tel" id="mobile" class="form-control" placeholder="手機號" name="mobile" required>
        </div>

        <div class="form-group">
            <
 
label for="inputMobileCode" class="sr-only">MobileCode</label>
            <input type="text" id="inputMobileCode" class="form-control" style="display: inline;width: 200px;" name="mobile_code" placeholder="驗證碼" required>
            <button class="btn btn-info" type="button" id="getyzm"
 
 onclick="getCode(document.getElementById('mobile').value)">獲取驗證碼</button>
        </div>

        <div class="form-group">
            <label for="inputPassword" class="sr-only">Password</label>
            <input type="password" id="inputPassword" class="form-control" name="password" placeholder="密碼" required>
        </div>

        <div class="form-group">
            <label for="inputSecondPassword" class="sr-only">SecPassword</label>
            <input type="password" id="inputSecondPassword" class="form-control" name="password_confirm" placeholder="確認密碼" required>
        </div>

        <a href="{:url('login/index')}" class="button pull-right" style="margin: 0 0 10px 0;">返回登入</a>
        <div class="form-group">
            <button class="btn btn-lg btn-primary btn-block" type="submit">註冊</button>
        </div>
    </form>

點擊發送驗證碼之後，根據狀態碼判斷是否啟動定時器，如果為true則驗證碼傳送成功，定時器啟動，如果為false則跳出相關錯誤資訊的彈窗。

function getCode(phone){
        if(!(/^1[34578]\d{9}$/.test(phone))){
            alert("手機號碼有誤，請重填");
            return ;
        }
        $.ajax({
            type : "post",
            url : "{:url('getSms')}",
            data : {'mobile':phone,'type':'forget'},
            dataType : "json",
            success:function(result){
                if(!result.bools){
                    alert(result.msg)
                }else{
                    showtime(60);
//                    console.log(result.msg);
                }
            }
        })
    }
    //顯示時間
    var showtime = function(t){
        $("#getyzm").attr('disabled',true);
        for(i=1;i<=t;i++){
            window.setTimeout(updatetime, i * 1000,i,t);
        }
    }
    //更新時間
    var updatetime = function(num,t){
        if(num == t){
            $("#getyzm").attr('disabled',false);
            $("#getyzm").text("重新發送");
        }else{
            remaintime = t - num;
            $("#getyzm").text(remaintime + " 秒後重新發送");
        }

2、後端主要程式碼

getSms主要進行一些邏輯性的判斷和呼叫。

//傳送驗證碼
    public function getSms(){

        if(!request()->isPost()){
            $this->error('當前請求非法！');
        }

        $data = input('post.');
        if(!isMobile($data['mobile'])){
            return json(array('bools'=>false,'msg'=>'手機號碼不符合格式'));
        }
        //判斷是否超過驗證碼有效期
        if(Session::has('mobile_code','yzm')){
            if(time() - session('session_start_time','','yzm') < 60*15){
                return json(array('bools'=>false,'msg'=>'驗證碼15分鐘內有效'));
            }else{
                session('mobile_code',null,'yzm');
            }
        }
        //判斷是忘記密碼還是註冊賬戶
        if($data['type'] == 'forget'){
            $result = AdminModel::hasUser($data['mobile']);
            if($result['flag']){
                return $this->sendSms($data['mobile']);
            }else{
                return json(array('bools'=>false,'msg'=>'該手機號未註冊'));
            }
        }
        if($data['type'] == 'register'){
            $result = AdminModel::hasUser($data['mobile']);
            if($result['flag']){
                return json(array('bools'=>false,'msg'=>$result['msg']));
            }{
                return $this->sendSms($data['mobile']);
            }
        }
    }

sendSms為傳送驗證碼的核心方法，sendSms的主要程式碼在聚合資料給的案例裡也有，我這裡進行了部分修改。將生成驗證碼的時間也儲存到session中，在上面呼叫的時候可以對驗證碼的時效進行嚴格的控制。

//傳送驗證碼
    public function sendSms($mobile){
        $code = rand(1000,9999);
        session('mobile_code',$code,'yzm');
        session('session_start_time',time(),'yzm');
        $params = array(
            'key'   => Config::get('juheSMS')['key'], //您申請的APPKEY
            'mobile'    => $mobile, //接受簡訊的使用者手機號碼
            'tpl_id'    => Config::get('juheSMS')['tpl_id'], //您申請的簡訊模板ID，根據實際情況修改
            'tpl_value' =>'#code#='.$code.'&#company#=蛋叔科技' //您設定的模板變數，根據實際情況修改
        );

        $paramstring = http_build_query($params);
        $content = juheCurl(Config::get('juheSMS')['url'], $paramstring, 1);
        if($content){
            $result = json_decode($content, true);
            $error_code = $result['error_code'];
            if($error_code == 0){
                //狀態為0，說明簡訊傳送成功
                return json(array('bools'=>true,'msg'=>'簡訊傳送成功，簡訊ID：'.$result['result']['sid']));
            }else{
                //狀態非0，說明失敗
                $msg = $result['reason'];
                return json(array('bools'=>false,'msg'=>'簡訊傳送失敗！('.$error_code.'):'.$msg));
            }
        }else{
            return json(array('bools'=>false,'msg'=>'簡訊已傳送，未收到請重試'));
        }
    }