短信驗證手機號

原理：

用戶點擊獲取驗證碼時，發送手機號到後端接口，後端接受請求後，將手機號以及驗證碼發給短信網關，並將手機號和短信驗證碼保存起來。用戶收到短信後，輸入驗證碼，而後前端將驗證碼和手機號傳給後端，後端校驗手機號和驗證碼是否與以前保存的一致，若是一致，則驗證經過，向前端發送認證狀態，認證經過的狀態下前端進行頁面的跳轉或者是其餘的業務邏輯。

代碼：

html代碼

<div class="box">
    <div class="center" style="padding-top:0.8rem;">
        <ul>
            <li class="clearfix">
                <input type="number" class="sjh" placeholder="手機號" id="phonenum2" style="color:#535353;"/>
                <button class="fyzm" id="embed-submit">發送驗證碼</button>
            </li>
            <li>
                <input type="number" class="yzm" placeholder="驗證碼" id="vernum" style="color:#535353;"/>
            </li>
        </ul>
    </div>
    <div class="bottom">
        <button class="btn" id="submit" href="javascript:">提交</button>
    </div>
</div>

js代碼

//點擊發送驗證碼    $("#embed-submit").unbind('click').bind('click',function(){        $("#vernum").val("");        var tel = $("#phonenum2").val();        var reg = /^0?1[3|4|5|7|8][0-9]\d{8}$/;        if (reg.test(tel)) {//驗證手機號碼            yzget_fn();        }else{            alert_('請輸入有效電話號碼');        }    });//發送手機號到後端接口    function yzget_fn(){        $("#embed-submit").attr('disabled','disabled');            $("#embed-submit").addClass("fyzmOn");    //發送驗證碼按鈕樣式變化        //獲取驗證碼        var phonenum = $("#phonenum2").val();//電話號碼        $.ajax({            url:"",            type: "get",            dataType: "json",            success:function(msg){                if(msg.message=='success'){                    var second = msg.term;   //秒數                    var embedSubmit = $("#embed-submit");                    var i = parseInt(second*1)+1;                    var time_ = setInterval(function(){                        if(i>0){                            i--;                            embedSubmit.html("正在獲取"+i);                        }else{                            clearInterval(time_);                            $("#embed-submit").attr('disabled',false);                            $("#embed-submit").removeClass("fyzmOn");                            embedSubmit.html('發送驗證碼');                        }                    },1000)                }else if(msg.message=='error'){                    alert_(msg.data);                    $("#embed-submit").attr('disabled',false);                    $("#embed-submit").removeClass("fyzmOn");                }            }        })    }    //提交驗證信息，點擊提交把手機號和驗證碼傳給後端    $('#submit').unbind('click').bind('click',function(){        var self_=$(this);        if(self_.attr("odisabled")=="odisabled"){            $(".buyFrame").css("display","block");            alert_("操做過於頻繁，請5秒以後重試");            var timeable = setTimeout(function(){                self_.attr('odisabled',false);                clearTimeout(timeable);            },5000)        }else{            var vernum = $("#vernum").val(); //驗證碼            var phonenum = $("#phonenum2").val();//電話號碼            var reg = /^0?1[3|4|5|7|8][0-9]\d{8}$/;            if (!reg.test(phonenum)) {//驗證手機號碼                alert_("請先輸入有效電話號碼");                return false            }else if(!vernum){                alert_('請輸入驗證碼');                return false;            }else{                $.ajax({                    //獲取id，challenge，success（是否啓用failback）                    url: "https://www.*******/dealwine/sendsmsverify?mobile="+phonenum+"&wxopenid=${wxopenid}"+"&smscode="+vernum,                    type: "post",                    dataType: "json",                    success: function (data) {                        if(data.message=='success'){                            alert_('驗證成功');                            $("#phonenum2").val($("#phonenum").val());                            self_.attr('odisabled','odisabled');                            var returnurl = "${returnurl}";                            history.go(-1);                        }else{                            alert_('驗證失敗');                            self_.attr('odisabled','odisabled');                        }                        $("#submit").attr('disabled',false);                    },error:function(){                        alert_('信息出錯，請從新嘗試！');                        $("#submit").attr('disabled',false);                        self_.attr('odisabled','odisabled');                    }                })            }        }    });