短信提交验证

 

$(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;
        }
    }
    })