Хотите чтобы в вашем проекте регистрировались только с почты определённого домена? Можно устроить!

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

Делюсь пошаговым планом эвакуации 😱 действий:
1) Вам нужно поставить обычную форму на страницу (поле имейла должно быть не скрыто)
2) Поставить CSS-класс блоку с формой form в "Стилях" блока
3) В самый верх страницы поставить следующий CSS в отдельный блок "CSS-код":

.form [data-item-name="emailField"] {
    position: relative;
}

.form [data-item-name="emailField"] .field-content:before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background: #333;
    border-radius: 50%;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.form [data-item-name="emailField"].valid .field-content:before {
    background: #0f0;
    box-shadow: 0 0 5px #0f0,
               0 0 10px #0f0,
               0 0 20px #0f0;
}

.form [data-item-name="emailField"].invalid .field-content:before {
  background: #f00;
    box-shadow: 0 0 5px #f00,
               0 0 10px #f00,
               0 0 20px #f00;
}

4) Поставить JS-код в отдельный блок в самый низ страницы, либо под самой формой:

$(function() {
function validate() {
let emailInput = document.querySelector('.form [data-item-name="emailField"]');
let innerInput = document.querySelector('.form [data-item-name="emailField"] input').value;
let formButton = document.querySelector('.form button');
const pattern = /@gmail.com|@yandex.ru/;

if (innerInput.match(pattern)) {
emailInput.classList.add('valid');
emailInput.classList.remove('invalid');
formButton.disabled = false;
} else {
emailInput.classList.add('invalid');
emailInput.classList.remove('valid');
formButton.disabled = true;
}

if (innerInput == "") {
emailInput.classList.remove('valid');
emailInput.classList.remove('invalid');
formButton.disabled = true;
}
};

$('.form [data-item-name="emailField"] input').on('keyup',function() {
validate();
});

validate();
})

В данный момент скрипт настроен таким образом, что будет считать валидным строку имейла, если в ней присутствует @gmail.com или @yandex.ru. Эта настройка хранится в переменной pattern, вы не пропустите отдельное выделение данного паттерна в скрипте, когда будете ставить его на Геткурс. Вы можете изменить этот паттерн, например, вы хотите добавить так же @mail.ru, то паттерн будет выглядеть уже вот так /@gmail.com|@yandex.ru|@mail.ru/

Обратите внимание, все новые значения доменов перечисляйте через знак прямого слэша ( | ).

#полезная_фишка