JSFiddle - React, Tailwind, and code Playground

by Sergey Aleshin

HTML

<p>Example for email address: <b>[email protected]</b>
<br>
Required symbols: <b>@</b> and <b>.</b> (dot)</p>

<form action="">
  <label for="email_input">Email: </label>
  <input id="email_input" type="text" placeholder="Enter email address">
  <input id="checkbtn" type="button" value="Check email">
</form>

JavaScript

// Функция принимает строку в виде аргумента email и проверяет ее на соответсвие регулярному выражению, которое соответствует шаблону email адреса. Возвращает true или false. true - переданная строка соответствует шаблону email адреса, false - нет.
function checkEmail(email) {
	// Шаблон регулярного выражения для email адреса
	var emailpattern = new RegExp(/^[a-zA-Z0-9\._]+@[a-zA-Z0-9\.-]+\.[a-zA-Z]+$/);
  // метод test шаблона регулярного выражения проверяет, соответствует-ли переданная ему в качестве аргумента строка с его шаблоном
	return emailpattern.test(email);
}
// Элемент - кнопка "Check email"
var checkbtn = document.getElementById("checkbtn");
// Элемент - поле ввода email адреса
var emailinput = document.getElementById("email_input");

// Собатие нажатия левой клавишей мыши по элементу кнопки.
checkbtn.onclick = function () {
	var check = checkEmail(emailinput.value);
  if (check) {
  	alert("Email адрес введен корректно!");
  } else {
  	alert("Email адрес введен не корректно!");
  }
}