Рубрики
Без рубрики

4 способа проверки электронного письма с JavaScript 📮

В этой статье вы обнаружите три способа выполнить проверку по электронной почте с JavaScript! “Старый… С тегом JavaScript, WebDev, начинающих, Codenewbie.

В этой статье вы обнаружите три способа выполнить проверку по электронной почте с JavaScript!

«Старый миф говорит о том, что вы являетесь мастером веб -разработки после создания контактной формы! 🧙😄 » – неизвестно

Проверка электронной почты с использованием регулярных выражений

Наиболее распространенный способ проверить электронное письмо с JavaScript – это использовать регулярное выражение (Regex). Регулярные выражения поможет вам определить правила для проверки строки.

Если мы суммируем, электронное письмо – это строка, следующая за этим форматом:

1. Первая часть электронной почты

  • прописные и строчные буквы: A-Z и A-Z
  • цифры: 0-9
  • Гафины: – (не последний или первый персонаж)
  • точки:. (не последний или первый персонаж)

Примечание: Некоторые поставщики электронной почты допустили адреса электронной почты с этим символом: ! # $ % & '\* +/=? ^ \ _ \ {| } ~ "(),:; <> @ [ \ ] . Это будет зависеть, если вы хотите принять эти почты, но большинство веб -сайтов отвергает их.

2. Вторая часть электронной почты

  • прописные и строчные буквы: A-Z и A-Z
  • цифры: 0-9
  • Гафины: – (не последний или первый персонаж)

3. Третья часть электронной почты

  • прописные и строчные буквы: A-Z и A-Z
  • цифры: 0-9
  • точки:. (не последний или первый персонаж)

Вот выражение режима электронной почты:

/^[a-zA-Z0-9][\-_\.\+\!\#\$\%\&\'\*\/\=\?\^\`\{\|]{0,1}([a-zA-Z0-9][\-_\.\+\!\#\$\%\&\'\*\/\=\?\^\`\{\|]{0,1})*[a-zA-Z0-9]@[a-zA-Z0-9][-\.]{0,1}([a-zA-Z][-\.]{0,1})*[a-zA-Z0-9]\.[a-zA-Z0-9]{1,}([\.\-]{0,1}[a-zA-Z]){0,}[a-zA-Z0-9]{0,}$/i

В JavaScript вы можете использовать эту функцию для проверки электронной почты.

function isEmailValid(email) {
  const emailRegexp = new RegExp(
    /^[a-zA-Z0-9][\-_\.\+\!\#\$\%\&\'\*\/\=\?\^\`\{\|]{0,1}([a-zA-Z0-9][\-_\.\+\!\#\$\%\&\'\*\/\=\?\^\`\{\|]{0,1})*[a-zA-Z0-9]@[a-zA-Z0-9][-\.]{0,1}([a-zA-Z][-\.]{0,1})*[a-zA-Z0-9]\.[a-zA-Z0-9]{1,}([\.\-]{0,1}[a-zA-Z]){0,}[a-zA-Z0-9]{0,}$/i
  )

  return emailRegexp.test(email)
}

console.log(isEmailValid('helloitsme@herewecode.io')) // true
console.log(isEmailValid('hello-its-me@herewecode.io')) // true
console.log(isEmailValid('hello.its.me@herewecode.io')) // true
console.log(isEmailValid('helloitsme+test@herewecode.io')) // true
console.log(isEmailValid('.helloitsme@herewecode.io')) // false
console.log(isEmailValid('helloitsme.@herewecode.io')) // false
console.log(isEmailValid('@herewecode.io')) // false
console.log(isEmailValid('helloitsmeherewecode.io')) // false
console.log(isEmailValid('helloitsme@herewecode')) // false
console.log(isEmailValid('d@d.o')) // false

Примечание: Как вы можете себе представить, эта регуляция не домашняя. Я нашел его на переполнении стека; Затем я обновил его, чтобы соответствовать формату строки электронной почты, описанного выше.

Проверка электронной почты с использованием валидатора электронной почты

Если вы не хотите создавать пользовательскую функцию для проверки электронных писем, вы можете использовать библиотеки. Когда мы набираем: «Библиотека проверки электронной почты JavaScript» в Google, первым результатом является Библиотека “Email Validator” Анкет

Вот пример того, как его использовать:

const validator = require('email-validator')

console.log(validator.validate('helloitsme@herewecode.io')) // true
console.log(validator.validate('hello-its-me@herewecode.io')) // true
console.log(validator.validate('hello.its.me@herewecode.io')) // true
console.log(validator.validate('helloitsme+test@herewecode.io')) // true
console.log(validator.validate('.helloitsme@herewecode.io')) // false
console.log(validator.validate('helloitsme.@herewecode.io')) // false
console.log(validator.validate('@herewecode.io')) // false
console.log(validator.validate('helloitsmeherewecode.io')) // false
console.log(validator.validate('helloitsme@herewecode')) // false
console.log(validator.validate('d@d.o')) // false

Валидатор электронной почты – одна из других библиотеки. Вы можете найти их с различными функциями в Интернете.

Проверка электронной почты с использованием проверки ввода HTML5

Последний способ подтвердить электронное письмо – использовать HTML5 Email Input Анкет

Вот пример проверки электронной почты с использованием простой формы:




  
    
JavaScript Validate Email


    
Write your email and we will validate it:

Как видите, HTML запускает ошибку, когда адрес электронной почты не верен. Однако, если мы вводим, например: «helloitsme@horewecode» или «-Hehwecode.io», форма действительна. Эта опция является хорошей функцией, которую вы должны использовать при внедрении формы на своем веб -сайте. Это подходит для первой проверки, но не забудьте подтвердить себя, чтобы избежать проблем.

Проверка электронной почты с использованием API

В качестве бонуса вы можете проверять электронные письма с помощью API. Вот некоторые компании, предлагающие API -интерфейсы проверки электронной почты: SendGrid, MailboxLayer, Abstract API и т. Д. Большинство из этих API не являются бесплатными, но они предоставят вам некоторые расширенные функции (например, проверьте, существует ли электронное письмо).

Эй, ты сделал это!

Спасибо за чтение до конца! Надеюсь, вы узнали из этого! 🎉

➡ Я помогаю веб -разработчикам улучшить свои навыки 💻 Если вы хотите получить больше советов и ресурсов о веб -программировании -> Следуй за мной в Твиттере 🐦

Оригинал: “https://dev.to/gaelgthomas/how-to-validate-an-email-with-javascript-25k3”

Читайте ещё по теме: