短信验证手机号

原理：

用户点击获取验证码时，发送手机号到后端接口，后端接受请求后，将手机号以及验证码发给短信网关，并将手机号和短信验证码保存起来。用户收到短信后，输入验证码，而后前端将验证码和手机号传给后端，后端校验手机号和验证码是否与以前保存的一致，若是一致，则验证经过，向前端发送认证状态，认证经过的状态下前端进行页面的跳转或者是其余的业务逻辑。

代码：

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');                    }                })            }        }    });