Question

我正在尝试在按下提交电子邮件按钮时验证电子邮件地址。

我尝试添加JQuery验证无济于事。我想知道如何添加＆＃34; if＆＃34;声明只会检查并通知用户，它不是同一标签中的有效电子邮件，表明它正在发送电子邮件。

＆＃13;

$('#Submit').on("click", function () {
  result = '<label style="color:white;">Sending message ...</label>';
  $("#sendSuccess").html(result);

  var email = $("#email").val(); 
  var body = "From: " + name + "<br />  Email: " + email + "<br /> Message: " + message;

  $.ajax({
    type: "POST",
    contentType: "application/json; charset=utf-8",
    url: "EmailService.asmx/SendMail",
    data: '{ body: "' + body + '", subject: "' + subject + '"}',
    dataType: "json",
    async: true,

    success: function (data, status, xhr) {
      //alert('success');
      result = '<label style="color:green;">The message has been sent!</label>';
      $("#sendSuccess").html(result);
    },
    error: function (data, status, xhr) {
      //alert('fail');
      result = '<label style="color:red;">The message has failed to send!</label>';
      $("#sendSuccess").html(result);
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <div>
    <input id="email" type="text" name="email"  class="form-control" />
  </div>
  <div>
    <button type="submit" id="Submit" class="form-control">Click</button>
      </div>
    </html>

＆＃13;

Answer 1

您可以这样做：

<html>
<div>
  <input id="email" type="text" name="email"  class="form-control" />
</div>
<div>
  <button type="submit" id="Submit" class="form-control">
</div>
</html>

<script>
    function isValidEmail(email) {
      return /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/i.test(email);
    }

    $('#Submit').on("click", function () {
        var email = $('#email').val();

        if (isValidEmail(email)) {
            result = '<label style="color:white;">Sending message ...</label>';
            $("#sendSuccess").html(result);

            var body = "From: " + name + "<br />  Email: " + email + "<br /> Message: " + message;

            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "EmailService.asmx/SendMail",
                data: '{ body: "' + body + '", subject: "' + subject + '"}',
                dataType: "json",
                async: true,

                success: function (data, status, xhr) {
                    //alert('success');
                    result = '<label style="color:green;">The message has been sent!</label>';
                    $("#sendSuccess").html(result);
                },
                error: function (data, status, xhr) {
                    //alert('fail');
                    result = '<label style="color:red;">The message has failed to send!</label>';
                    $("#sendSuccess").html(result);
                }
            });


        } else {
            $('#sendSuccess').html('<label style="color:white;">Please enter a valid email address</label>');
        }
    });
<script/>

请注意，这将验证大多数电子邮件，但可能会拒绝一些技术上有效的非常奇怪的电子邮件地址。您可以阅读更多here以及评论中发布的StackOverflow answer其他人。

如果你需要验证更多的字段，那么可能值得给jQuery验证另一个镜头......以前使用它并且如果你正在进行大量的通用表单验证，那肯定会有所帮助。

JS / JQuery电子邮件地址验证

1 个答案: