最近公司為了業績投放了大批落地頁廣告，又用到了簡訊驗證碼驗證，現將原始碼與大家分享，很詳細很格式化，可交流，輕噴。

1.HTML大家都會，直接上程式碼,css就不粘貼出來了。

<section class="form_apply">
                <div class="phone_number">
                    <img src="img/mobile.png" alt="">
                    <input type="tel" id="phone" placeholder="請輸入手機號" maxlength="11">
                </div>
                <div class="code_number">
                    <img src="img/info.png" alt="">
                    <input type="number" id="code" placeholder="簡訊驗證碼" maxlength="6"/>
                    <input type="button" id="get_code" value="獲取驗證碼" />
                </div>
                <div class="form_tip"></div>
                <div class="apply_btn">免費申請</div>
                <div class="more_herf"><a href="http://www.xxxx.com/" style="color: #00A0E9;">更多產品請點選＞</a></div>

 </section>

2.js詳細內容，讓你複製可用。token是後臺給出的，這裡為演示用固定的值，有疑問請回復我。

$(function () {
    //先宣告驗證碼返回資料
    var Rcode = "";
    var Tcken = "";
    var UserCode = "";
    var MbStr = "";
    //先給輸入框聚焦引起使用者重視
    $("#phone").focus();
    //客戶重新輸入時不提示錯誤資訊
    $("input").focus(function () {
        $(".form_tip").html("");
    })
    //簡訊傳送按鈕倒計時
    $("#get_code").click(function () {
        var that = this;
        that.disabled = true;
        var count = 60; 
        var token = "BE315Dxx-CFxx6-4xxx-ACAC-70D90BEAxxx";
        var regPhone = /^1[34578]\d{9}$/;
        var tel = $("#phone").val();
        if (regPhone.test(tel) == false) {
            $(".form_tip").html('* 手機號碼錯誤，請核對後重新輸入');
            that.disabled = false;
            return false;
        } else {
            var timer = setInterval(function () {
                if (count > 1) {
                    count--;
                    that.value = count + "s後重發";
                } else {
                    that.value = "獲取驗證碼";
                    that.disabled = false;
                    clearInterval(timer); //清除計時器
                }
            }, 1000);
            $.ajax({
                type: "post",
                url: "../SendxxxxvPhone",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify({ "PhoneNumber": tel }),
                beforeSend: function (request) {
                    request.setRequestHeader("x-ol-authtoken-ssl-xxxx", token);
                },
                dataType: 'JSON',
                cache: false,
                success: function (data) {
                    var jsd = eval(data);
                    Rcode = jsd.ReturnResult;
                    Tcken = jsd.Ton;
                    UserCode = jsd.Code;
                    MbStr = jsd.Mb;
                }
            })
        }
    })
    //點選提交資料
    $(".apply_btn").click(function () {
        var cd = $("#code").val();
        console.log(cd)
        console.log(Rcode)
        //此判斷必須，如果兩個都為空也符合下一步判斷條件的相等，也就是說客戶什麼都不填也能跳轉到下一步頁面
        if(cd==""){
            $(".form_tip").html('* 請輸入簡訊驗證碼');
            return false;
        }
        if (Rcode == cd) {
            var tel = $("#phone").val();
            //將得到的資訊傳送到跳轉的頁面進行下一步使用
            // 由於存在安全性風險，只建議在移動端使用此方式
            window.location.href = "./apply.html?l=" + tel + "&t=" + Tcken + "&c=" + UserCode + "&m=" + MbStr;
        }else{
            $(".form_tip").html('* 簡訊驗證碼錯誤，請核對後重新輸入');
        }
    })

})