Использование проверки формы и регулярных выражений для проверки формата адреса электронной почты (JS)

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

Использование проверки формы во внешнем интерфейсе — более эффективный способ снять дополнительную вычислительную нагрузку на внутреннем сервере. Веб-приложения на основе графического интерфейса, которые требуют отправки данных, требуют большего количества проверок, чем больше полей для ввода данных. В этой статье мы выполним простую процедуру проверки, чтобы убедиться, что пользователь правильно вводит свой адрес электронной почты. Для этого потребуется среда разработки Javascript с использованием любого редактора (в данном примере использовался Visual Studio Code) и веб-браузер для тестирования (веб-браузер Chrome).

Краткое введение в регулярное выражение

Поскольку мы проверяем адрес электронной почты, мы должны использовать RegEx (регулярные выражения). Это связано с тем, что нам нужно сопоставлять шаблоны и комбинации символов в строке. Это требует использования литерала регулярного выражения, который принимает форму, заключенную между косыми чертами:

/ <pattern> /

Адрес электронной почты состоит из следующего формата:

username@domain_name.top_level_domain

имя пользователя — строка, состоящая из символов A-Z (прописные буквы) или az (строчные буквы). Он также может содержать цифры и другие символы, такие как точки, поэтому его необходимо проверить. (например, джон.смит)

@ — это символ, который отделяет имя пользователя от домена, на котором размещен адрес электронной почты.

domain_name — имя хост-домена электронной почты (например, somedomain)

top_level_domain — указывает, размещен ли этот домен в коммерческом (.com), правительственном (.gov) или другом типе домена верхнего уровня, как определено в разрешении имен или DNS-сервере.

Для нашего примера предположим, что адрес электронной почты: [email protected]

Ниже приведены наши критерии для RegEx:

/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/

Примечание. Чтобы узнать больше о RegEx, перейдите по этой ссылке, чтобы понять, как создавать и писать регулярные выражения.

Создать форму

Давайте создадим HTML-форму. В папке проекта создайте файл, который мы назовем emailvalidation.html. Затем скопируйте/вставьте или напишите следующий код для нашей формы.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript - Regular Expressions With E-mail Validation</title>
</head>
<body>
<h3>E-mail Validation Check</h3>
<form name="myForm" onsubmit="return(validate());">
<input id="text" name = Email placeholder="Email" type="text"><br><br>
<button type = "submit">Submit</button>
</form>
<script src="validate_form.js"> </script>
</body>
</html>

Я создал форму под названием myForm, используя функцию для возврата и проверки ввода из формы. Также создается простая кнопка отправить, которую пользователь будет нажимать.

Тег script был добавлен внизу, потому что мы будем вызывать код Javascript для выполнения проверки. Это будет файл, который будет создан на следующем шаге. На данный момент должно быть включено имя этого файла Javascript, validate_from.js.

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

Форма должна выглядеть следующим образом при открытии в веб-браузере.

Создайте процедуры проверки

В той же папке проекта создайте новый файл с именем validate_form.js. Это файл Javascript, который был указан в тегах сценария HTML-файла.

function validate(){
     var email = document.getElementById("text").value;
     var regx = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
     if(regx.test(email)){
        alert("You have provided a valid e-mail ID")
        return true
     }
     else{
        alert("Sorry, incorrect e-mail ID")
        document.myForm.Email.focus("")
        return false;
     }
}

Внутри файла была создана функция с именем validate(). Созданное ранее регулярное выражение было добавлено в переменную regx, которая будет проверяться с помощью условного оператора.

Как работает проверка

Используя regx в качестве критерия, мы используем процедуру тестового метода, чтобы увидеть, проходит ли шаблон в поле ввода с идентификатором «текст». Мы делаем это, передавая переменную email в качестве аргумента для проверки.

Если формат электронной почты правильный, появится всплывающее окно с сообщением:

«Вы указали действительный идентификатор электронной почты»

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

«Извините, неправильный адрес электронной почты»

Затем фокус вернется к текстовому полю, и пользователь сможет повторить попытку.

Допустим, я намеренно ввел неправильный адрес электронной почты:
john.smith$domainname.comp

Появится следующее предупреждающее сообщение:

Теперь, если я ввел правильный адрес электронной почты:
[email protected]

Предупреждающее сообщение будет выглядеть так:

Если я использую более сложные форматы электронной почты, такие как следующие:
[email protected]
[email protected]

Все они будут действительными на основе критериев регулярных выражений, созданных для проверки правильного имени пользователя и структуры домена.

Синопсис

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

В более сложных формах для проверки формы используется более одной процедуры. В этом примере показано, как реализовать проверку только для одного поля, тогда как в форме ввода данных для подписки на потоковую онлайн-службу их будет много. Лучше всего проверять данные перед их отправкой на внутренний сервер, чтобы снизить нагрузку на обработку. Он также может немедленно уведомить пользователя о том, что он набрал неправильно, без необходимости выходить в сеть для проверки.

Использование проверки формы и регулярных выражений для проверки формата адреса электронной почты (JS)