Javascript 功能在我的正则表达式上无法正常工作

Question

我似乎无法弄清楚我的代码哪里出错了，是我的正则表达式还是我的 javascript 代码。当我输入正确的电子邮件格式时，警报仍然出现，而它应该只在电子邮件格式错误时才会出现。

我正在使用 javascript 的 toggleClass 功能来处理事件模式中的警报。

$('.email').blur(function() {
  var regex =
    /^(([^<>()[\]\\.,;:\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,}))$/;
  var isEmailCorrect = $(this).val().match(regex);
  $('.modal:visible').find('.popemail').toggleClass('hide', isEmailCorrect);
  $('.sub').prop('disabled', !isEmailCorrect);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label>Email</label>
<span id="popover-email" class="popemail hide pull-right block-help">
    <i class="fa fa-info-circle text-danger" aria-hidden="true"></i>
    Please use the proper format of an email</span>
<input type="email" class="email form-control" id="email" name="email" placeholder="Email" value="<?php echo $row['email']; ?>">

当放置格式正确的电子邮件时，不应出现警报，但放置错误格式的电子邮件时，应该会出现警报。我为警报使用了切换类，请参阅第 4 行。

Answer 1

您正在使用 .match()，它将在您的正则表达式中返回匹配的子字符串数组。这不是 bool 值。运行此示例以查看:

var regex =/^(([^<>()[\]\\.,;:\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,}))$/;

console.log("bob@aol.com".match(regex));

如果你使用 .test()，你想要什么，如果它匹配或不匹配，它将返回一个 bool 值。

var regex =/^(([^<>()[\]\\.,;:\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,}))$/;

console.log(regex.test("bob@aol.com"));
console.log(regex.test("banana"));

---

编辑:

需要说明的是，这就是您的代码应有的样子。我添加了一些调试 console.log 调用以帮助您了解内容。我稍微更改了 HTML 以使该演示能够正常运行。单击“运行代码片段”按钮。

$('.email').blur(function() {
  var regex = /^(([^<>()[\]\\.,;:\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,}))$/;
  
  var isEmailCorrect = regex.test(this.value);
  
  console.log('Email Value:', this.value);
  console.log('Is Email Correct:', isEmailCorrect);
  
  $('.modal:visible').find('.popemail').toggleClass('hide', isEmailCorrect);
  $('.sub').prop('disabled', !isEmailCorrect);
});

.hide{display:none;}
.popover-email{color: red;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="modal">
  <label for="email">Email</label>
  <input type="email" id="email" class="email" name="email" placeholder="Email">
  <span id="popover-email" class="hide popemail">Please use the proper format of an email</span>
</div>