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()，它将在您的正则表达式中返回匹配的子字符串数组。这不是布尔值。运行此示例以查看：

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()而不是您想要的，它将返回一个布尔值，如果匹配或不匹配。

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>

Answer 2

您的原始表达式工作得很好，也许您可​​能想要在测试之前修剪输入，可能传递一些可能与开始和结束锚冲突的空格，或者可能传递了一些不允许的字符：

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

Demo

const 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,}))$/gm;
const str = `alice@google.com
bob@google.com
alice@google_.com
bob@google.co_
`;
let m;

while ((m = regex.exec(str)) !== null) {
    // This is necessary to avoid infinite loops with zero-width matches
    if (m.index === regex.lastIndex) {
        regex.lastIndex++;
    }
    
    // The result can be accessed through the `m`-variable.
    m.forEach((match, groupIndex) => {
        console.log(`Found match, group ${groupIndex}: ${match}`);
    });
}

RegEx电路

jex.im可视化正则表达式：

Answer 3

如@Chris Barr所述，您应该使用Regexp#test方法而不是String#match。因此，您只需要在代码中更改一行：

  var isEmailCorrect = regex.test($(this).val()); 

在那之后，您必须在控制台中调试jQuery选择器，因为再也无法将html元素与类'modal'一起使用了。