JS Проверка email по частям

Question

Хочу сделать проверку email, но не простую, а по частям.

типа человек начинает вводить почту: some email - ему выдает ошибку, что в почте есть недопустимые символы. Он исправляет почту: some_email - ему пишет, что нет @. Он пишет: some_email@ - и ему снова выдает ошибку, что нет домена.

Думаю, вы поняли, что я имею ввиду)

У меня есть такой код, но он работает не совсем правильно.

let emailInp = document.querySelector('#input');
emailInp.oninput = () => {
  let text =  emailInp.value;
  let errorMessage = '';
  const mailRegEx = {
    ename: /^[\w.*-]+/,
    edog: /^([\w.*-]+@)/,
    ecom: /^([\w.*-]+@([\w]+\.)+[\w]{2,4})?$/
  }

  if (!mailRegEx.ename.test(text)) {
    errorMessage = "Недопустимые символы";
  } else if (!mailRegEx.edog.test(text)) {
    errorMessage = "Отсутствует @";
  } else if (!mailRegEx.ecom.test(text)) {
    errorMessage = "Неправильный домен почты";
  }

  document.querySelector('div').innerHTML = errorMessage
}

<input id="input" />
<div ></ div>

Попробуйте проверить как оно работает) И подскажите как это можно исправить

Например email ka ka выдает ошибку, что нет @, вместо того, чтобы писать, что здесь недопустимые символы. А если написать просто пробел, то ошибка уже правильная: недопустимые символы.

Answer 1

Необходимо добавить якорь (Конец строки или @) в первую регулярку:

function val(text) {
  const mailRegEx = {
    ename: /^a+(?=@|$)/,
    edog: /^a+@/,
    ecom: /^a+@b\.c$/
  }
  let errorMessage = '';
  if (!mailRegEx.ename.test(text)) {
    errorMessage = "Недопустимые символы";
  } else if (!mailRegEx.edog.test(text)) {
    errorMessage = "Отсутствует @";
  } else if (!mailRegEx.ecom.test(text)) {
    errorMessage = "Неправильный домен почты";
  }
  return errorMessage;
}

let emailInp = document.querySelector('#input');
emailInp.oninput = () => 
  document.querySelector('div').innerHTML = val(emailInp.value);


[
 'ab', 'ab@', 'aa', 
 'aa@', 'a@b', '[email protected]',
].forEach(inp => console.log(inp, val(inp)))

<input id="input" />
<div></ div>

БЛОГ НА HUSL

JS Проверка email по частям

Ответы (1 шт):