javascript - 验证电子邮件时显示 Jquery

Question

我想在电子邮件未通过验证时显示我的 div。并在它存在时将其隐藏。

这是我尝试过的方法，但它不起作用。

$("#fes-email").on("change.validation keyup.validation", function () {
    var email = $(this).val(); 
    $("#fes-submit").prop("disabled", email.length == 0 || !isValidEmailAddress(email));
    $('#fes-form').submit(function () { 
        return !$("#fes-submit").is(':disabled') 
        $("#notification-container").show("slide");
    });
}).trigger('change.validation');

Answer 1

在显示之前退出函数。

$('#fes-form').submit(function () { 
    return !$("#fes-submit").is(':disabled')    <---exits function
    $("#notification-container").show("slide");  <-- will never be called
});

而且你有一个更大的问题。在每次更改时，您都将提交处理程序绑定(bind)到表单。那很不好。将提交处理程序从更改事件中取出。

(function() {

  var isValid = false;

  $("#fes-email").on("change.validation keyup.validation", function() {
    var email = $(this).val();
    isValid = email.length && isValidEmailAddress(email);
  }).trigger('change.validation');

  $('#fes-form').submit(function() {
    if (isValid) { 
        $("#notification-container").slideUp();
    } else { 
        $("#notification-container").slideDown();
    }
    return isValid;
  });

}());

function isValidEmailAddress(email) {
  var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return re.test(email);
}

#notification-container {
  background-color: red;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="fes-form">
  <label for="fes-email">Email</label>
  <input type="text" id="fes-email" name="fes-email" class="validation" />
  <input type="submit" />
</form>
<div id="notification-container">Invalid Email</div>