jquery 在通过 ajax 提交表单之前通过 ajax 验证电子邮件答案

【问题标题】：jquery validate email via ajax before submitting form also via ajaxjquery 在通过 ajax 提交表单之前通过 ajax 验证电子邮件
【发布时间】：2012-08-23 16:36:22
【问题描述】：

我有一个包含电子邮件地址字段的个人资料创建表单。我需要确保用户输入的电子邮件地址格式有效，并且还没有被使用。对于格式检查，我有一个由 isValidEmailAddress 函数执行的简单客户端验证，效果很好。对于我需要检查电子邮件地址是否不存在的另一部分，我将 jquery post 发送到控制器方法，如果电子邮件已被某人使用，则返回字符串“电子邮件地址已在使用中”......但在第一个“return false”下面的代码不会阻止表单提交。这是一个异步的jquery吗？

  $(document).ready(function(){

    $("#new_profile").submit(function(){
      var email = $("#user_email").val();    
      if(isValidEmailAddress(email)){
        jQuery.post('/profiles/validate_email', {email: email}, function(data){
          if(data.match(/in use/)){
            $(".email-check-message").html(data);
            return false;
          }
        });
      }
      else{
        $(".email-check-message").html('please enter a valid email address');
        return false;
      }
    });    
  });

此外，上述函数中的 jquery 帖子似乎不起作用..因为我没有在服务器日志中看到服务器调用。有谁知道发生了什么？谢谢。

【问题讨论】：

标签： javascript jquery ajax

【解决方案1】：

就用这个吧：

$(document).ready(function(){

  $("#new_profile").submit(function(event){
    var email = $("#user_email").val();    
    if(isValidEmailAddress(email)){
      jQuery.post('/profiles/validate_email', {email: email}, function(data){
        if(data.match(/in use/)){
          $(".email-check-message").html(data);
          event.preventDefault();
        }
      });
    }
    else{
      $(".email-check-message").html('please enter a valid email address');

    }
  });    
});

【讨论】：

【解决方案2】：

您必须无条件地取消提交，因为提交处理程序将在 ajax 请求返回之前完成执行（除非您将 async 设置为 false），因此您无法阻止已经发生的操作。您可以设置一个标志来指示电子邮件是否有效，然后提交表单

$(document).ready(function(){
    $("#new_profile").submit(function(e){
        if (!$('#new_profile').data('validemail')){
            e.preventDefault();
            var email = $("#user_email").val();    
            if(isValidEmailAddress(email)){
                jQuery.post('/profiles/validate_email', {email: email}, function(data){
                    if(data.match(/in use/)){
                        $(".email-check-message").html(data);
                    }
                    else{
                        $('#new_profile').data('validemail', true).submit();
                    }
                });
            }
            else{
                $(".email-check-message").html('please enter a valid email address');
            }
        }
    });     
});

【讨论】：

最大的教训是 preventDefault 然后无条件取消提交。谢谢穆萨。

【解决方案3】：

我可以提供不同的解决方案。

发送到php后先用你的函数检查邮件，要控制的asp文件已经在使用中。

$("#new_profile").submit(function(event){

  var email = $("#user_email").val();    
  if(isValidEmailAddress(email)){


        $.post(
                'control.php?do=mail',
                {mail:email},
                function(answer){

//对答案做某事

                }
          );

       });

} else{
        $(".email-check-message").html('please enter a valid email address');
        return false;
      }

【讨论】：

【解决方案4】：

试试：

$(document).ready(function(){

  $("#new_profile").submit(function(event){
    var email = $("#user_email").val();    
    if(isValidEmailAddress(email)){
      jQuery.post('/profiles/validate_email', {email: email}, function(data){
        if(data.match(/in use/)){
          $(".email-check-message").html(data);
          event.preventDefault();
        }
      });
    }
    else{
      $(".email-check-message").html('please enter a valid email address');
      event.preventDefault();
    }
  });    
});

【讨论】：

相同的结果..form 仍然继续并提交。
preventDefault() 在第二种情况下有效吗？当电子邮件地址无效时？
如果是这样，这不是关于停止默认操作，而是您的函数没有从“控制器方法”中检索正确的数据，因此它将所有电子邮件地址作为有效地址传递并继续并提交形式。

【解决方案5】：

你可以使用

event.preventDefault()

当您检查有效电子邮件失败或电子邮件已被使用时，停止提交表单。

这是一个example，它是如何工作的。

【讨论】：