Каморка Геткурсовода 💻 | Канал Максима Елисеева

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

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

Делюсь пошаговым планом эвакуации 😱 действий:
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/

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

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

1.4K views15:33

Каморка Геткурсовода 💻 | Канал Максима Елисеева

Выходные, время работы над своими ошибками и переосмыслению ситуаций. Вот и я на выходных нашел для вас полезный сервис, который помогает выявлять ошибки в CSS-коде онлайн, если вы не понимаете, где у вас затык, и пересмотрели глазами всё вдоль и поперёк 😂

CSS Lint поможет вам найти ошибки в вашем CSS-коде (а так же травмирует ваши чувства, как утверждает сам сервис

😄

), и покажет, что и где было не так. На скриншоте я привёл пример своего кривого CSS, и линтер вывел все имеющиеся ошибки в таблицу, так же подсветив строки, в которых нашел проблему. Где-то не закрыты скобки, о чём он тоже сообщает и ругается, а так же неправильное написание некоторых свойств и их значений.

Будет полезно для тех, кому не хочется ставить сторонние специализированные программы по редактору кода 😎

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

Please open Telegram to view this post