Javascript не работает должным образом на моем регулярном выражении

Question

Кажется, я не могу понять, где в моем коде неправильно, является ли это моим регулярным выражением или моим кодом в javascript. Когда я ввожу правильный формат электронной почты, предупреждение все еще приходит, когда предполагается, что оно появляется только тогда, когда формат электронной почты неправильный.

Я использую функциональность toggleClass в javascript для оповещений в активном модальном режиме.

$('.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

Как упомянул @Chris Barr, вы должны использовать Regexp # test метод вместо String # match . Таким образом, вы должны изменить только одну строку в вашем коде:

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

После этого вам нужно отладить в консоли ваши селекторы jQuery, поскольку из-за использования вашего html-элемента с классом 'modal' больше не было найдено.

Answer 3

Ваше оригинальное выражение работает просто отлично, возможно, вы захотите обрезать свои входные данные перед тестированием, можете пропустить некоторые пробелы, которые могут конфликтовать с начальным и конечным якорями, или, возможно, вы пропускаете некоторые символы, которые не допускаются:

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

Демо

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 визуализирует регулярные выражения: