zoukankan      html  css  js  c++  java
  • 省份二级联动

    
    


    $(function(){

    //适配本地和测试环境
    var host = "http://api.bch.xuemao.com",
    xmhost = 'http://dev.www.xuemao.com';


    var winurl = (window.location.href).split('/')[2];

    if(winurl.indexOf('dev')>=0){
    host = "http://api.bch.xuemao.com";
    xmhost = 'http://dev.www.xuemao.com';

    }else if(winurl.indexOf('bch') >= 0){

    host = "http://api.bch.xuemao.com";
    xmhost = 'http://www.bch.xuemao.com';

    }else{
    host = "http://api.xuemao.com";
    xmhost = '//www.xuemao.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("请输入手机号!");
    return false;
    //手机号正则
    }else if(!(/^1[3456789]d{9}$/.test(phone))) {
    $('#smsmsgLayer .error').show();
    $('#smsmsgLayer .error .error_msg').html("请输入正确的手机号");
    return false;
    }
    return true;
    }
    //手机验证码
    function checkSmsCode(){
    var smsCode = $.trim($('#smsCodeLayer').val());
    if (smsCode == null || smsCode == "") {
    $('#smsmsgLayer .error').show();
    $('#smsmsgLayer .error .error_msg').html("请输入验证码");
    $('#smsmsgLayer .error .error_msg').css({
    'color':'#fff'
    })
    return false;
    }
    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 .succ').fadeOut(3000);
    }else{
    $('#smsmsgLayer .error').fadeIn(500);
    $('#smsmsgLayer .error .error_msg').html(res.info);
    $('#smsmsgLayer .error').fadeOut(3000);
    clear_Inter();
    return false;
    }
    },
    error: function(res){
    $('#smsmsgLayer .error').show();
    $('#smsmsgLayer .error .error_msg').html("请重新获取");

    clear_Inter();
    return false;
    // console.log(res)
    }
    });
    }

    //用户名非必填,填了就检验格式
    $("#nusernameLayer").blur(function(){
    var nusername = $('#nusernameLayer').val();
    if(nusernameLayer == '') return false;
    //只能输入中文 英文 和空格
    var reg =/^[a-zA-Zu4e00-u9fa5s ]{1,20}$/;
    if(!(reg.test(nusername))) {
    $('#nameMsgLayer .error .error_msg').html("姓名格式不正确");
    $('#nameMsgLayer .error').show();
    return false;
    }else {
    $('#nameMsgLayer .error .error_msg').html("");
    $('#nameMsgLayer .error').hide();
    return true;
    }

    });
    //用户名验证码
    function t_usrname(){
    var nusername = $('#nusernameLayer').val();
    //只能输入中文 英文 和空格
    var reg =/^[a-zA-Zu4e00-u9fa5s ]{1,20}$/;
    if(nusername == null || nusername == "") {
    return true;
    }else if(nusername!=''){
    if(!(reg.test(nusername))) {
    $('#nameMsgLayer .error .error_msg').html("姓名格式不正确");
    $('#nameMsgLayer .error').show();
    return false;
    }
    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_code').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;
    }
    $("#hq_smsLayer").css({"background":"#b41f5e","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();
    // var cityVal =$('#city-picker-span .placeholder').html();
    $.ajax({
    type:"GET",
    url: host+'/xuemao/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>'
    }
    // console.log(html);
    $('#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);
    }else{
    $('#smsmsgLayer .error .error_msg').html(res.info);
    $('#smsmsgLayer .error').css({
    'color':'#fff',
    "position":"absolute",
    "bottom":'-23px',
    "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('');
    }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(!checkPhone()){
    return false;
    }
    if(!checkSmsCode()){
    return false;
    }
    if(!t_usrname()){
    return false;
    }
    mobile_submit(userInfo);

    })

    //非本区域隐藏
    $('body').click(function(e) {
    var target = $(e.target);
    if(!target.is('#provincesLayer *') && !target.is('#citysLayer *')) {
    $('#citysLayer').hide();
    $('#provincesLayer').hide();
    }
    });

    })
  • 相关阅读:
    Adobe PS
    深入学习二叉树(04)平衡二叉树
    深入学习二叉树(03)二叉查找树
    C 知识点
    实战【docker 镜像制作与使用】
    从0到1了解 CI/CD
    理解Spring 容器、BeanFactory 以及 ApplicationContext
    Java 中 CAS
    volatile 关键字
    JenKins安装
  • 原文地址:https://www.cnblogs.com/liubingyjui/p/10102609.html
Copyright © 2011-2022 走看看