待發短信

在線客服
產品支持 短信寶客服
合作渠道 渠道合作
服務咨詢

4001-021-502

工作時間

9:00-18:00

短信寶驗證碼開發教程 - 5.前端篇


這是這個系列的最后一篇了,主要介紹前端的數據處理。主要有幾個關鍵技術點:

1.當頁面打開時,判斷上次短信發送請求的時間間隔有沒有到,如果沒有到,則前端顯示倒計時,并且禁用按鈕。由于數據來自于后端(在后端篇里面說到過),所以就算用戶重新刷新頁面也不能重置前端的倒計時時間。

2.防止用戶在發送短信驗證碼時,由于點擊過快,一次發送2條或2條以上的情況。 
原理:聲明一個標記變量為true,只有標記為true時,才能執行ajax發送。當點擊發送按鈕時,把標記設置false,只有等ajax返回數據后,才重置為true。

3.無論短信是否發送成功,都會重置圖形驗證碼。做到每次發送短信,都需圖形驗證碼的驗證。

在sms/register.php中添加代碼:

<script src="js/jquery.js"></script>
<script>
    var time = 0; // 倒計時時間
    var res = null; // 倒計時資源,釋放時使用
    var sendNode = null; // 發送的按鈕節點
    var diffTime = "<?php echo $diff; ?>"; // 由php計算的時間差的結果。所以就算用戶刷新頁面,倒計時還是存在的。

    /**
     * 執行倒計時的方法
     */
    function sendTime() {
        clearTimeout(res); // 先清空一下倒計時資源。
        time--; // 倒計時時間遞減。

        // 如果倒計時到達0時,則恢復按鈕原來的內容
        if (time <= 0) {
            time = "獲取驗證碼";
            sendNode.text(time);
            clearTimeout(res);
            time = 0;
            return;
        }

        // 倒計時的內容寫到按鈕里面
        sendNode.text("剩余" + time + "秒");
        res = setTimeout("sendTime()", 1000);
    }

    /**
     * 調用處
     */
    $(function() {
        sendNode = $("#get_code"); // 獲取發送的節點
        var flg = true; // 防止ajax重復提交的標記

        // 在頁面加載時,先判斷一下是否上次倒計時未完成,由php計算,防止頁面刷新,覆蓋掉倒計時。
        if ("" != diffTime) {
            time = parseInt(diffTime);
            sendTime();
        }

        /**
         * 點擊發送短信,觸發事件
         */
        sendNode.on("click", function() {
            // 如果當前倒計時結束,則收集表單數據,并ajax提交到服務端
            if (0 == time) {
                var phoneNum = $("input[name='phone']").val();
                var code = $("input[name='vcode']").val();
                var data = {"code" : code, "phone" : phoneNum};
                var err = "";

                if (flg == true) {
                    flg = false;
                    // ajax提交請求
                    $.ajax({
                        "url" : "./tool/sendCode.php",
                        "type" : "post",
                        "data" : data,
                        "dataType" : "json",
                        "success" : function (msg) {
                            $(".errmsg").text("");

                            if (-1 == msg.flg) {
                                err = msg.err;

                                if ("code" == msg.type) {
                                    $("#code_err").text(err);
                                } else if ("phone" == msg.type) {
                                    $("#phone_err").text(err);
                                } else {
                                    alert("短信發送失敗,原因:" + err);
                                }
                            } else {
                                time = 60;
                                sendTime();
                                alert("發送驗證碼成功!");
                            }

                                // 刷新圖形驗證碼
                            $("#code_img").click();
                            flg = true;
                        }
                    });
                }
                return false;
            }
        });
    });
</script>

好了,我們來走一遍注冊的流程: 
1.填好注冊信息后,發送短信驗證碼,并成功接收到。 
 這里寫圖片描述

2.填寫好接收到的短信驗證碼,完成注冊。跳轉到sms/login.php 
這里寫圖片描述

整個短信驗證碼開發教程全部完畢。我已經提供了源碼下載。在這里我要特別感謝一下短信寶官網,他們公司本著幫助更多用戶的原則, 讓我把代碼上傳到他們的服務器上。如果還有什么疑問,可以給我留言,或者找短信寶的在線客服人員。






 
開源插件
文章標簽
曾道人特码大公开