簡訊提交驗證

 

$(function(){
    //適配本地和測試環境
 var  host = "http://api.bch.XXX.com",
        xmhost = `http://dev.www.XXX.com`;
    var winurl = (window.location.href).split(`/`)[2];
    if(winurl.indexOf(`dev`)>=0){
        host = "http://api.bch.XXX.com";
        xmhost = `http://dev.www.XXX.com`;
    }else if(winurl.indexOf(`bch`) >= 0){
        host = "http://api.bch.XXX.com";
        xmhost = `http://www.bch.XXX.com`;
    }else{
        host = "http://api.XXX.com";
        xmhost = `//www.XXX.com`;
    }
    var cityMassage = ``;
    //手機號
 function checkPhone(){
        var phoneNumber = $.trim($(`#t_codeLayer`).val());
        var phone = document.getElementById(`t_codeLayer`).value;
        if (phoneNumber == null || phoneNumber == "") {
            $(`#smsmsgLayer .error`).show();
            $(`#smsmsgLayer .error .error_msg`).html("請輸入手機號！");
            $(`#smsmsgLayer`).css(`marginBottom`,`19px`);
            return false;
            //手機號正則
 }else if(!(/^1[3456789]d{9}$/.test(phone))) {
            $(`#smsmsgLayer .error`).show();
            $(`#smsmsgLayer .error .error_msg`).html("請輸入正確的手機號");
            $(`#smsmsgLayer`).css(`marginBottom`,`19px`);
            return false;
        }
        return true;
        $(`#smsmsgLayer`).css(`marginBottom`,`10px`);
    }
    //手機驗證碼
 function checkSmsCode(){
        var smsCode  = $.trim($(`#smsCodeLayer`).val());
        if (smsCode == null || smsCode == "") {
            $(`#smsmsgLayer .error`).show();
            $(`#smsmsgLayer .error .error_msg`).html("請輸入驗證碼");
            $(`#smsmsgLayer`).css(`marginBottom`,`19px`);
            $(`#smsmsgLayer .error .error_msg`).css({
                `color`:`#fff`
 })
            return false;
        }
        $(`#smsmsgLayer`).css(`marginBottom`,`10px`);
        return true;
    }

    var daoshus = 60;
    var timer = null;
    //獲取驗證碼倒數計時1分鐘
 function fn_daoshu(){
        $("#smsmsgLayer .daoshus").show();
        daoshus -- ;
        $("#smsmsgLayer .daoshus").text(daoshus +`s`);
        if(daoshus == 0){
            clear_Inter();
        }
    }
//清楚定時器
 function clear_Inter(){
        daoshus = 60;
        $("#smsmsgLayer .daoshus").text(`60s`).hide();
        clearInterval(timer);
    }

//傳送簡訊驗證碼
 $("#hq_smsLayer").click(function(){
        var mobile = $.trim($(`#t_codeLayer`).val());
        if(!checkPhone()){
            return false;
        }
        send_login_code(mobile);
    });

 //傳送簡訊驗證碼
 function send_login_code(mobile)
    {
        $("#smsmsgLayer .daoshus").show();
        timer = setInterval(fn_daoshu,1000);
        $("#smsCodeLayer").attr("disabled" , false);
        $.ajax({
            type:"GET",
            url:xmhost+`/api/user/get_sms_code`,
            data:{
                mobile: mobile,
            },
            datatype: "json",
            success:function(res){
                if(res.status == `true`){
                    // com.prompt("傳送成功！");
	 $(`#smsmsgLayer .succ`).fadeIn(500);
                    $(`#smsmsgLayer .succ`).html("傳送成功！");
                    $(`#smsmsgLayer`).css(`marginBottom`,`19px`);
                    $(`#smsmsgLayer .succ`).fadeOut(3000);
                }else{
                    $(`#smsmsgLayer .error`).fadeIn(500);
                    $(`#smsmsgLayer .error .error_msg`).html(res.info);
                    $(`#smsmsgLayer`).css(`marginBottom`,`19px`);
                    $(`#smsmsgLayer .error`).fadeOut(3000);
                    clear_Inter();
                    return false;
                }
            },
         error: function(res){
                $(`#smsmsgLayer .error`).show();
                $(`#smsmsgLayer .error .error_msg`).html("請重新獲取");
                $(`#smsmsgLayer`).css(`marginBottom`,`19px`);
                clear_Inter();
                return false;
 		}
        });
    }

    //使用者名稱非必填,填了就檢驗格式
 $("#nusernameLayer").blur(function(){
        var nusername  = $(`#nusernameLayer`).val();
        if(nusername == ``) return false;
	//只能輸入中文 英文 和空格
 	var reg =/^[a-zA-Zu4e00-u9fa5s ]{1,20}$/;
        if(!(reg.test(nusername))) {
            $(`#nameMsgLayer .error .error_msg`).html("姓名格式不正確");
            $(`#nameMsgLayer .error`).show();
            $(`#nameMsgLayer`).css(`marginBottom`,`19px`);
            return false;
        }else {
            $(`#nameMsgLayer .error .error_msg`).html("");
            $(`#nameMsgLayer .error`).hide();
            $(`#nameMsgLayer`).css(`marginBottom`,`10px`);
            return true;
        }
    });
//使用者名稱驗證碼
 function t_usrname(){
        var nusername  = $(`#nusernameLayer`).val();
        //只能輸入中文 英文 和空格
 var reg =/^[a-zA-Zu4e00-u9fa5s ]{1,20}$/;
        if(nusername == null || nusername == "") {
            $(`#nameMsgLayer`).css(`marginBottom`,`10px`);
            return true;
        }else if(nusername!=``){
            if(!(reg.test(nusername))) {
                $(`#nameMsgLayer .error .error_msg`).html("姓名格式不正確");
                $(`#nameMsgLayer .error`).show();
                $(`#nameMsgLayer`).css(`marginBottom`,`19px`);
                return false;
            }
            $(`#nameMsgLayer`).css(`marginBottom`,`10px`);
            return true;
        }
    }
    $(`#nusernameLayer`).on("input",function(){
        var nusername = $(`#nusername`).val();
        if (nusername == null || nusername == "") {
            $(`#nameMsgLayer .error`).hide();
            $(`#nameMsgLayer .error .error_msg`).html("");
            return true;
        }
    })
    //手機號失焦校驗
 $(`#t_codeLayer`).blur(function(){
        if(!checkPhone()){
            return false;
        }
    })
    //正在輸入檢驗
 $(`#t_codeLayer`).on("input",function(){
        var phoneNumber = $.trim($(`#t_codeLayer`).val());
        var phone = document.getElementById(`t_codeLayer`).value;
        if (phoneNumber == null || phoneNumber == "") {
            $("#hq_smsLayer").css({"background":"#eee","color":"#999"});
            return false;
            //手機號正則
 }else if(!(/^1[3456789]d{9}$/.test(phone))) {
            $("#hq_smsLayer").css({"background":"#eee","color":"#999"});
            return false;
        }
        console.log(phoneNumber)
        $("#hq_smsLayer").css({"background":"#50ca9e","color":"#fff"});
        $("#hq_smsLayer.colr").css({"background":"#13c5c1","color":"#fff"});
        $("#hq_smsLayer .dbing").css({"background":"#b41f5e","color":"#fff"});
        $("#smsmsgLayer .error").hide();
        $("#smsmsgLayer .error .error_msg").html(``);
    })

    //省份
 var citysData = [];
    $(`.city-picker-spanLayer`).click(function(){
        $(`#provincesLayer`).hide();
        $(`#citysLayer`).hide();
 $.ajax({
            type:"GET",
            url: host+`/XXX/public/china_city_class.json`,
            data:{
                city:`北-上`
 },
            dataType: `json`,
            success: function(res){
                if(res.result == `succ`){
                    citysData = res.data;
                    var data=res.data;
                    var html =``;
                    for(var i=0;i<data.length;i++){
                        var province= data[i].province;
                        html+=`<a data-id="`+data[i].id+`" >`+province+`</a>`;
                    }
                    $(`#provincesLayer .a_padd`).html(html)
                    $(`#provincesLayer`).show();
                }
            },
            error: function(res){
            }
        })

    })

    //選擇市
 var proVal = ``;
    var  cityVal = ``;
    $("#provincesLayer").on("click" , ".a_padd a" ,function(){
        $(`#cityLayer`).hide();

        proVal=$(this).html();
        var this_id = $(this).attr(`data-id`);
        $(`.city-picker-spanLayer .placeholder`).html(proVal);
        cityMassage = proVal;
        if(this_id == `2`|| this_id == `19` ||this_id == `857` ||this_id == `2459`){
            var html = $(this).html();
            $(`#citysLayer .a_padd`).html(`<a >`+html+`</a>`);
            $(`#provincesLayer`).hide();
            $(`#citysLayer`).show();
        }else {
            //二級
 for(var i=0;i<citysData.length;i++){
                if(this_id == citysData[i].id){
                    var html = ``;
                    for(var j=0;j<citysData[i].son.length;j++){
                        html += `<a data-id="`+citysData[i].son[j].id+`">`+citysData[i].son[j].city+`</a>`
 }
 $(`#provincesLayer`).hide();
                    $(`#citysLayer .a_padd`).html(html);
                    $(`#citysLayer`).show();
                }
            }
        }
    });

    //填充表單資料
 $("#citysLayer").on("click" , ".a_padd a" ,function(){
        cityVal= $(this).html();
        $(`.city-picker-spanLayer .placeholder`).html(proVal+`-`+cityVal)
        cityMassage = proVal+`-`+cityVal;
        $(`#provincesLayer`).hide();
        $(`#citysLayer`).hide();
    })
    //提交前手機號驗證碼驗證
 function mobile_submit(userInfo ){
        $.ajax({
            type:"GET",
            url: xmhost+`/api/user/check_sms_code`,
            data:{
                mobile : userInfo.mobile,
                code : userInfo.code
 },
            dataType: `json`,
            success: function(res){
                if(res.status == `true`){
                    postMsg(userInfo);
                    $(`.city-picker`).css(`marginTop`,`0`);
                }else{
                    $(`#smsmsgLayer .error .error_msg`).html(res.info);
                    $(`#smsmsgLayer`).css(`marginBottom`,`10px`);
                    $(`.city-picker`).css(`marginTop`,`10px`);
                    $(`#smsmsgLayer .error`).css({
                        `color`:`#fff`,
                        "position":"absolute",
                        "bottom":`-18px`,
                        "left":0,
                        `display`:`block`
 });
                    return false;
                }
            },
            error: function(res){
                return false;
            }
        })

    }

    //提交按鈕
 function postMsg(userInfo){
        var reg_source = $.trim($("#source").val()), //暫時寫死
 name=$(`#nusernameLayer`).val();
        var submitInfo = {
            name:name,
            city:cityMassage,
            mobile : userInfo.mobile,
            code : userInfo.code ,
            reg_source : reg_source,
            pf_source:1 ,  //pf_source:2(1是pc，2是觸屏)
 ip: returnCitySN["cip"]
        };
        $.ajax({
            type:"GET",
            url: host+`/xuemao/formcollection/save_form_data.json`,
            data:submitInfo,
            xhrFields: {
                withCredentials: true
 },
            dataType: `json`,
            success: function(res){
                if(res.result == `succ`){
                    clear_Inter();
                    $(`#submsgLayer`).fadeIn(500);
                    $(`#submsgLayer`).html("已提交！");
                    $(`#submsgLayer`).fadeOut(1000);
                    $(`#smsmsgLayer .error`).hide();
                    $(`#t_codeLayer`).val(``);
                    $("#smsCodeLayer").attr(`disabled`,`disabled`).val(``);
                    $("#hq_smsLayer").css({"background":"#eee","color":"#999"});
                    $(`.city-picker-spanLayer .placeholder`).html(`選擇省份/自治區`);
                    $(`#nusernameLayer`).val(``);
                    $(`#smsmsgLayer`).css(`height`,`33px`);
                    $(`#smsmsgLayer .error`).css({
                        "bottom":`-18px`
 });
                }else {
                    // show_msg(res.info);
 $(`#submsgLayer`).fadeIn(500);
                    $(`#submsgLayer`).html(res.info);
                    $(`#submsgLayer`).fadeOut(1000);
                }
            },
            error: function(res){
                return false;
            }
        })
    }

    $(`#s_btnLayer`).click(function(){
        var phone = $.trim($(`#t_codeLayer`).val()),
            yz_code = $.trim($(`#smsCodeLayer`).val());

        var userInfo = {
            mobile : phone,     //手機號
 code : yz_code     //驗證碼
 };
        if(!t_usrname()){
            return false;
        }
        if(!checkPhone()){
            return false;
        }
        if(!checkSmsCode()){
            return false;
        }
        mobile_submit(userInfo);
    })

    //非本區域隱藏
 $(`body`).click(function(e) {
        var target = $(e.target);
        if(!target.is(`#provincesLayer *`) && !target.is(`#citysLayer *`)) {
            $(`#citysLayer`).hide();
            $(`#provincesLayer`).hide();
        }
    });
   var wwidth = document.documentElement.clientWidth;
    $(`#closeLayer`).click(function() {
        foot_timer = setTimeout(calcd, 10);
        $(`.er_cord`).fadeOut(200)
        $(`.formbox`).fadeOut(200);
        $(this).hide();
        $(`.adv`).fadeOut(800);
        setTimeout(function(){
            $(`.advShow`).show(400);
        },500)
    })
    $(`.advShow`).click(function(){
        setTimeout(calcw, 10);
        $(`.bottomLayer`).css("bottom",0)
        $(`#closeLayer`).fadeIn(400);
        $(`.adv`).fadeIn(800);
        $(this).hide();
        setTimeout(function(){
            $(`.formbox`).fadeIn(1000);
            $(`.er_cord`).fadeIn(1600)
        },100)
    })
    var foot_timer =null;
    var times=null;
    var bottomshowStep=20;
    var step=5;
    var wstepb=-5;
    var wstep=-10;
    var interval=2;
    var thisdiv=document.querySelector(`.bottomLayer`);
    var thisfbottom =50;
    function calcd(){
        moveWidthStep();
    }
    function calcw(){
        moveWidthStepshow();
        var divstyle =getComputedStyle(thisdiv);
        console.log(divstyle.width)
    }
    function moveBottomStep(){//移動一步
 $(`.bottomLayer`).hide(600)
        var divstyle =getComputedStyle(thisdiv);
        thisdiv.style.bottom = parseInt(divstyle.bottom)+(-wstepb)+`px`;
        if(parseInt(thisdiv.style.bottom)<thisfbottom){
            times = setTimeout(function(){
                moveBottomStep();
            },interval)
        }
        if(parseInt(thisdiv.style.bottom)>=thisfbottom){
            thisdiv.style.bottom=thisfbottom+`px`;
            clearTimeout(times)
        }
    }
    function moveWidthStep(){//移動一步
 // $(`.bottomLayer`).hide(400);
 var divstyle =getComputedStyle(thisdiv);
        thisdiv.style.width = parseInt(divstyle.width)+wstep+`px`;
       // console.log(thisdiv.style.width)
 if(parseInt(thisdiv.style.width)>0){
            timew = setTimeout(function(){
                moveWidthStep();
            },interval)
        }
        if(parseInt(thisdiv.style.width)<parseInt(-wstep)){
            thisdiv.style.width=0;
            clearTimeout(timew)
            timew=null;
        }
    }

    function moveWidthStepshow(){
        var divstyle =getComputedStyle(thisdiv);
        thisdiv.style.width = parseInt(divstyle.width)+bottomshowStep+`px`;
        console.log(divstyle.width)
        if(parseInt(thisdiv.style.width)<wwidth){
            timewd = setTimeout(function(){
                moveWidthStepshow();
            },interval)
        }
        if(parseInt(thisdiv.style.width)>wwidth){
            thisdiv.style.width=`100%`;
            clearTimeout(timewd)
            timewd=null;
        }
    }
    })