Как установить проверку Regex электронной почты в ReactJS?

Question

В JSX для ReactJS я пытаюсь выполнить проверку регулярного выражения в своем поле электронной почты без зависимости (например, от Validator), вот что у меня есть сейчас:

isEmailInvalid = ({ email }) => {
        if (email.value.match(/^[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[A-Za-z]+$/)) {
            return false;
        } else {
            return true;
        }
    };

и некоторые другие, но ни один из нихсработало .. Когда я выполняю поиск "проверка соответствия регулярному выражению реагирования", я получаю очень разные ответы, и ни один из них на самом деле не работает для меня, поэтому я хотел бы спросить:

Как выполнить проверку регулярного выражения без какой-либо зависимости,в ReactJS с JSX?

Answer 1

При обратном вызове onChange вызовите эту функцию с введенным значением. эта функция не будет ничего делать, если ввод электронной почты имеет правильный формат, но что-то пойдет не так с форматом, это предупредит о неправильной электронной почте.

<input
 onChange={e => validateEmail(e.target.value)}
/>

проверка

const validateEmail = (mail) => {
 if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(mail))
  {
    return (true)
  }
    alert("You are writing invalid email address!")
    return (false)
}

Я надеюсь, что это может быть полезно для вас.

Answer 2

Я стараюсь избегать написания регулярных выражений любой ценой. Хотя это не ответ на вопрос, как вы можете проверить электронную почту с помощью регулярных выражений, это то, как я это делаю, используя валидатор. Сначала получите пакет.

npm install validator

импорт в проект

import validator from 'validator';

использование

let checkIfValidEmail = validator.isEmail(email); // true for good email

Надеюсь, вы найдете это полезным.