javascript - 表单提交问题，大家帮忙看下，附代码！

问题描述

问 题

1.被要求做如下图效果，正常情况下直接由后台调入客户手机号，如客户手机号与绑定的手机号不符，点击验证重新绑定；
（1）进入后的效果：

（2）点击后的效果：

2.我做的是先把点击后的INPUT隐藏，点击后原来有的手机号和提示消失，然后需要输入的input显出；现贴代码，后面写BUG；

HTML：

    <div id="MBN"><span>手机号码</span><input type="text" name="" placeholder="银行预留手机号" id="MBnumber"></div>
    <div class="code"><span>验证码</span><button id="obCode"><a href="javascript:;">获取验证码</a></button><input type="text" name="" placeholder="请输入验证码" id="vCode"></div>

    <div id="telNB"><span>手机号码</span><em>13121523412</em></div>

    <div id="telON">如银行手机号与绑定手机号不匹配请<span>点此验证！</span></div>

script：

//点击弹出电话验证码输入框
$('#telON').click(function(){
    $('#MBN').css("display","block");
    $('.code').css("display","block");
    $('#telNB').css("display","none");
    $('#telON').css("display","none");
})
//验证部分
$('#telON').click(function(){//这里我自作聪明的把验证函数放进了提示点击函数里，但发现不点击提示的情况下表单不能提交
$(function(){
    //获取验证码绑定
    $("#obCode").click(function(){
      getCode();
    });

    //提交校验
    $("#btnSubmit").click(function(){
      checkCode();
    });

      //验证码绑定提交
      function checkCode(){
      var flag = true;
       var mobile = $("#MBnumber").val();
       var vCode =  $("#vCode").val();
       var reg =/^1\d{10}$/;
       if(mobile == ''){
          // alert("手机号码不能为空");
          layer.open({
            content: '手机号码不能为空',
            btn: '我知道了'
          });
          //$("#MBnumber").focus();
          flag = false;
       }else if(!reg.test(mobile)){
          // alert("请输入正确格式的手机号");
          layer.open({
            content: '请输入正确格式的手机号',
            btn: '我知道了'
          });
          //$("#MBnumber").focus();
            flag = false;
       }

      var vCode =  $("#vCode").val();
      if(vCode =='' || vCode.length != 6){
        // alert("验证码不正确");
        layer.open({
          content: '验证码不正确',
          skin: 'footer',
          time: 1.3
        });
        $("#vCode").focus();
          flag = false;
      } 
      if(!flag){
        return false;
      }

       var loadIndex = layer.open({type: 2});

       jQuery.ajax({
         url:"WBPFrontPage!ajaxBindingCheck.action?MOBILE="+mobile+"&INPUT_CODE="+vCode,
         type:"post",
         dataType:'json',
         success:function(o){
           layer.close(loadIndex);
           //alert(o.msg);
           if(!o.flag){
             //alert(o.msg);
             layer.open({
              content: o.msg,
              skin: 'msg',
              time: 1.3
          });
           }else{
            // alert(o.msg);
            //跳转
             window.location.href="WBPFrontPage!userOrderPage.action";
           }
         }
       });
   }

      //获取验证码
      function getCode(){
        //1.获取参数
        var mobile = $("#MBnumber").val();

        var reg =/^1\d{10}$/;
        if(mobile == ''){
          //alert("手机号码不能为空");
          layer.open({
            content: '手机号码不能为空',
            btn: '我知道了'
          });
          return false;
        }else if(!reg.test(mobile)){
          // alert("请输入正确格式的手机号");
          layer.open({
            content: '请输入正确格式的手机号',
            btn: '我知道了'
          });
          return false;
        }
        //2倒计时
        getCode_time();
      
        //3调用后台发送
        jQuery.ajax({
          url:"WBPFrontPage!ajaxSendVerifyCode.action?MOBILE="+mobile,
          type:"post",
          dataType:'json',
          success:function(o){
            //alert(o.msg);
              if(o.msg.indexOf("成功")>=0){
                // alert("短信验证码发送成功，请注意查收。");
                layer.open({
                  content: '短信验证码发送成功，请注意查收。'
                  ,skin: 'msg'
                  ,time: 2 //2秒后自动关闭
                });
              }else{
                // alert("短信验证码发送失败！请重新获取。");
                layer.open({
                  content: '短信验证码发送失败！请重新获取。'
                  ,skin: 'msg'
                  ,time: 2 //2秒后自动关闭
                });
              }
          }
          });
      }

      //验证码倒计时
    var i = 60; // 倒计时时间
    function getCode_time(){
      var obCode = $("#obCode");

        if (obCode.hasClass('gray')) {
          return false;
        } else {
          time(obCode);
        }
        $("#obCode").attr("disabled",false);
        function time (t) {
          if (i == 0) {
            t.removeClass('gray');
            t.removeAttr("disabled");
            t.html('获取验证码');
            t.css('background','#fb5636');
            i = 60;  // 与声明的倒计时时间相同
            t.bind('click'); // 时间结束后，再次绑定click事件
          } else {
            t.attr("disabled", true);
            t.html(i+'秒后重发'); // 显示的倒计时
            t.css('background','gray');
            t.addClass('gray');
            i--;
            setTimeout(function () {
              time(t);
            }, 1000);
          }
        }
    }
 });
})

好，现在的问题是我按照现在的代码来，效果是实现了，但不点击提示重新输入手机号验证的情况下是提交不了的；因为我把验证绑在了点击提示里，不这么做，不验证的情况下会一直提示没有手机号，没有验证码的提示；但是这么做了，就把验证绑到里面了，不点击就提交不了；请问大家这种情况我要怎么解决，最好能帮我解决完贴出来，因为新手实在是不会了，谢谢大家了！

解决方案

代码肯定不能给你贴了。

只能从思路上给你提醒一下。

1，你在一个表单里，做了两件事情。最少两件不同的事情要用状态来区分一下。比如：normal状态和check状态。有了两个状态，你就知道哪种状态应该检查表单中的空值。
2，这种需求完全可以用两个不同的表单把两件事情区分开。比如：通过点击点此验证切换到另一个表单的显示。隐藏之前的。

这篇关于javascript - 表单提交问题，大家帮忙看下，附代码！的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！