Question

有一个用于电子邮件订阅的html表单，它连接到mailerlite，

<form class="ml-block-form" action="" data-code="ID" method="POST">
    <div class="form-group ml-field-email ml-validate-required ml-validate-email">
        <input id="mainval" class="newsletter-email" type="email" name="fields[email]" placeholder="Enter email address" />
    </div>
    <input type="hidden" name="ml-submit" value="1" />
    <p>
        <input id="formsubmit" class="newsletter-submit" type="submit" value="Submit" />
    </p>
</form>

这是ajax部分：

$(".ml-block-form").submit(function() {
    var vals = $(this).serialize();

    $.ajax({
        url: "//app.mailerlite.com/webforms/submit/ID",
        method: "POST",
        data: vals,
        success: function(data) {
            $("#formsubmit").val("Thanks");
            $('#formsubmit').css('background-color', '#6cd270');
        }
    });

    return false; // prevent from submit
});

现在的问题是，即使有人输入了无效的电子邮件地址，或者只是在没有输入任何电子邮件地址的情况下点击提交按钮，它也能正常工作。
如何验证电子邮件地址以确定它是否正确，使用ajax然后通过POST方法将其发送到mailerlite？

Answer 1

function validateForm() {
 var email = $('#mainval').val();
 if(email === "") {
  return false;
 }
 var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
 return regex.test(email);
}
      $(".ml-block-form").submit(function(){
        if(validateForm()) {

       var vals = $(this).serialize();

        $.ajax({
            url: "//app.mailerlite.com/webforms/submit/ID",  
            method: "POST",
            data: vals,
            success: function(data) {
                $("#formsubmit").val("Thanks");
                $('#formsubmit').css('background-color', '#6cd270');
            }
        });
        }
        return false; // prevent from submit
    });

Answer 2

如果客户端验证足够，只需在实际调用服务器之前验证您的电子邮件字段：

function emailValidation(email) {
   //write code to validate email; return true if email is valid, false otherwise
   if (email === '') { 
      return false;
   }
   //...other checks here 
   return true;
}

$(".ml-block-form").submit(function() {

    //validate email here; exit if email is invalid
    if (!emailValidation($("#mainval").val())) {
       return false;
    }
    //email has passed validation, submit the form
    var vals = $(this).serialize();

    $.ajax({
        url: "//app.mailerlite.com/webforms/submit/ID",
        method: "POST",
        data: vals,
        success: function(data) {
            $("#formsubmit").val("Thanks");
            $('#formsubmit').css('background-color', '#6cd270');
        }
    });

    return false; // prevent from submit
});

Answer 3

如果客户端验证足够，您的输入字段已经是电子邮件类型，因此将自动为您验证字段。

但是，如果要在js中验证它，可以在提交时使用正则表达式检查字段。

在您进行ajax调用以检查您的字段是否包含经过验证的电子邮件之前，此question有一个很好的代码块。

在通过带有ajax的html表单发送之前验证电子邮件地址

3 个答案: