onsubmit校验表单时利用ajax的return false无效解决方法-转

2022-08-10 10:07:21

原来的代码

function checkNewEmail(){

var re_email=new RegExp("\\w+@\\w+\\.\\w+\\.?\\w*");
          var newEmail=$("#email_new").val();
          if(re_email.test(newEmail)){
              $.ajax({
                  type:"post",
                  dataType:"json",
                  url:"existEmail?email="+newEmail,
                  success:function(dataResult){
                      if(dataResult=="true"){
                          $("#emial-error").text("邮箱已注册。");
                           return false;
                      }else{
                           return true;
                      }
                  }
              });
          }else{
              return false;
          }

}

每次邮箱格式正确用ajax判断邮箱是否已存在时，无论成功否都执行submit，卡了好久，网上找了好多，终于找到原因也解决方案了。

问题原因

执行ajax时return false的function 与onsubmit()不是同一个函数，所以无论return 什么都会直接执行submit()提交表单

ok知道错误原因了之后修改一下代码

修改后代码

function checkNewEmail(){

var flat=false;

var re_email=new RegExp("\\w+@\\w+\\.\\w+\\.?\\w*");
          var newEmail=$("#email_new").val();
          if(re_email.test(newEmail)){
              $.ajax({
                  type:"post",
                  dataType:"json",
                  url:"existEmail?email="+newEmail,
                  success:function(dataResult){
                      if(dataResult=="true"){
                          $("#emial-error").text("邮箱已注册。");
                           flat=false;
                      }else{
                           flat=true;
                      }
                  }
              });
          }else{
              return false;
          }

return flat;

}

修改之后再执行,可是每次执行完都return false,就好像flat=true,不起作用一样，可是调试了发现明明有执行flat=true

问题原因

在执行ajax时，async默认的默认值为true,这种情况为异步方式，就是说ajax发送请求后，在等待服务端返回的这个过程中，前台会继续执行ajax块后面的脚本，直到服务端返回正确的结果才会执行success,也就是说这时执行的是两个线程，一个线程在执行ajax时另一个进程已经执行return flat了。所以一直返回false.把async改为false，这时才是同步方式，只有一个线程。

找到原因后，再修改一下代码，最终终于成功了。

最终代码

function checkNewEmail(){
          var flat=false;
          var re_email=new RegExp("\\w+@\\w+\\.\\w+\\.?\\w*");
          var newEmail=$("#email_new").val();
          if(re_email.test(newEmail)){
              $.ajax({
                  type:"post",
                  dataType:"json",
                  async:false,//同步方式
                  url:"existEmail?email="+newEmail,
                  success:function(dataResult){
                      if(dataResult=="true"){
                          $("#emial-error").text("邮箱已注册。");
                          flat=false;
                      }else{
                          flat=true;
                      }
                  }
              });
          }else{
              $("#emial-error").text("邮箱格式不正确。");
              return false;
          }
          return flat;
      }

---------------------

本文来自 Boh_ 的CSDN 博客，全文地址请点击：https://blog.csdn.net/u010079945/article/details/38680769?utm_source=copy