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

Система валидации формы в ванильном JavaScript

Я в последнее время реализую систему управления валидацией в формах. Я считаю, что творчество является одной из лучших частей быть разработчиком, на самом деле я не верю только, я чувствую это как …

Автор оригинала: Robert Wozniak.

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

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

1. Прием

В этом сообщении в блоге я собираюсь прогуляться по системе проверки, написанной чистыми JS. Это будет учебное пособие, шаг за шагом введение в создание пользовательской системы проверки формы.

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

Если вы хотите использовать WebPack для него и использовать кодовую расщепление, продолжайте, оно приветствует, потому что это то, что я бы сделал.

2. Управление ошибками валидации

2.1 Форма HTML


   
      Validation state mananagement
      
      
   
   
      
Username is too short or contains special characters.
The password has to consist of one upper case letter, one number and one special character.

Выше вы можете увидеть наш простой HTML-код. Я не думаю, что есть что-то большее, чтобы объяснить на этом шаге, но позвольте мне быстро пройти через него.

В нашем теле мы получили элемент формы, который имеет класс с именем «Форма-1», и он использует метод «Post» для отправки данных на сервер. Внутри формы у нас есть два девса, имеющих занятия по имени «Группа». Наша класс «Групповой» собирается помочь нам отделить эти два входа и ее этикеток друг от друга.

Последний элемент в форме – кнопка. Эта кнопка будет отправлять нашу форму на сервер. Как видите, у него есть три класса. Я подозреваю, что вы уже знаете, что делает класс «BTN» и «BTN-2». Мы собираемся использовать наш класс «BTN» в качестве корневого класса для нашей кнопки, а класс «BTN-2» будет нашим расширением этого класса.

Еще один захватывающий подход, который я начал использовать некоторое время назад, называет классы, добавив «JS» в начале имени. Почему? Это подразумевает, что эта кнопка имеет функциональность JavaScript, прикрепленную к себе. Таким образом, мы знаем, что мы можем найти эту функциональность, ища класс «js-quice-usizer» в нашем коде JS.

Отлично, я объяснил HTML-часть, пойдем в самый важный – код JavaScript.

2.2 код JavaScript

Мы собираемся отпустить эту часть от создания функции отправки формы в нашем файле «Validation.js». Эта функция инициализация при открытии страницы. Это означает, что слушатель события прикреплен к нашей кнопке сразу.

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

const validationState = new Set();
const loginForm = document.forms[0];

Вкратце, наше «VavicationState» – это новый набор, который уникально хранит наши имена ввода и действует как наше государство. Наша переменная «Boginform» присваивала наша форма, где у нас есть наши входы и кнопка. Мы собираемся использовать эти два позже.

Давайте сосредоточимся на написании нашей функции, которая будет отправлять форму.

// The function submits the form
function submitForm() {
    const submitButton = document.getElementsByClassName('js-submit-user')[0];
    submitButton.addEventListener('click', function(event) {
        event.preventDefault();
        manageState().validateState();
    });
}

Давайте посмотрим на нашу функцию и что здесь происходит. Мы инициализируем постоянную переменную с именем «underbutton», и мы присваиваем ему нашу кнопку «Отправить форму».

Следующий шаг – убедиться, что мы подключим событие Click на нашу кнопку. Когда событие происходит после нажатия на кнопку, он не отправляет форму из-за механизма «PreventDefault». Мы используем его для проверки формы вместо того, чтобы отправить его прямо к серверу.

Второй вызов функции, который является «управлением (). ValidateState ()» будет введен в следующие шаги учебника.

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

// Attaching 'keyup' event to the login form.
// Using event delegation
function attachKeyUpEvent() {
    loginForm.addEventListener('keyup', function(event) {
        const nodeName = event.target.nodeName;
        const inputProps = event.target;

        if(nodeName === 'INPUT') {
            validateForm(inputProps);
        }
    });
}

Наша функция «AttChitkeyupevent» позволяет нам получить каждый характер на нашем входах, чтобы подтвердить наши значения в тот же момент. Давайте прыгнем в нашу функцию.

Мы присоединяем событие «KeyUP» в нашу переменную «loginform», которую мы объявили в верхней части нашего файла. Помнить? Эта переменная хранит нашу форму, которая содержит два входа и одну кнопку. Почему мы присоединяемся к событию «keyup» в форме, если мы должны поймать печатные символы из входов? Это хорошая вещь; Мы используем делегацию событий, которая позволяет нам признать то, что было изменено.

Все, что мы делаем в нашей форме, которая квалифицируется, что считается событием «KeyUp», мы собираемся получить его в нашем параметре под названием «Событие». Наш параметр «события» будет объектом, где одно из свойств называется «целью».

Как вы можете видеть, в объеме нашего события слушатель, я объявляю две постоянные переменные. Первый, «NodeName» получает имя узла нашего элемента, а второй представляет целевое свойство мероприятия, названо «входныеPROPS». На следующем этапе мы проверяем, если наше имя узла равен входу.

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

Следующим шагом является инициализация этих двух функций; Мы собираемся сделать это гибким и организованным способом.

function init() {
    attachKeyUpEvent();
    submitForm();
}

document.addEventListener('DOMContentLoaded', init);

Когда наш HTML-код загружен, мы собираемся вызвать нашу функцию «init», которая собирается вызвать две другие функции, необходимые для правильной работы нашей системы проверки. Если вы новичок, и вы не видели событие «DOMContentloaded» раньше, я объясню это вам в кратчайшие сроки.

Это событие будет выпущено после того, как все содержимое нагрузки страницы, он позволяет прикрепить функциональность JavaScript к вашим элементам DOM, когда они в нужном месте. Я надеюсь, что это поможет продвигаться вперед.

Ниже вы можете увидеть, что у нас до сих пор:

function attachKeyUpEvent() {
    loginForm.addEventListener('keyup', function(event) {
        const nodeName = event.target.nodeName;
        const inputProps = event.target;

        if(nodeName === 'INPUT') {
            validateForm(inputProps);
        }
    });
}

function submitForm() {
    const submitButton = document.getElementsByClassName('js-submit-user')[0];
    submitButton.addEventListener('click', function(event) {
        event.preventDefault();
        manageState().validateState();
    });
}

function init() {
    attachKeyUpEvent();
    submitForm();
}

document.addEventListener('DOMContentLoaded', init);

Первая часть учебника стоит позади нас. Мы собираемся пройти через реализацию более подробно. Следующим шагом является запись и объяснение нашей «управленческой» функции, которая вызывает функцию «andingForm».

// Collection of functions for managing state
function manageState() {
    return {
        addToState: (inputData) => {
            const action = 'removeClass';
            const { inputProps, inputName } = inputData;

            validationState.add(inputName);
            manipulateValidationMsg({ inputProps, action });
        },
        removeFromState: (inputData) => {
            const action = 'addClass';
            const { inputProps, inputName } = inputData;

            validationState.delete(inputName);
            manipulateValidationMsg({ inputProps, action})
        },
        validateState: () => {
            if(validationState.size > 0) {
                return false;
            }

            if(validationState.size === 0) {
                validationRules().emptyFields();
                return true;
            }
        }
    }
};

На данный момент мы собираемся пропустить функции, отличные от «Validatestate». Как видите, я использовал закрытие здесь. Почему я сделал это? Я сделал это, потому что я хотел сохранить функцию «управление», состоящую в том, чтобы организован, и что наиболее важно иметь смысл его имени, если вы посмотрите на функцию, она содержит только функции, связанные с состоянием.

Давайте сосредоточимся на функции «ValidateState». Эта функция срабатывает в функции «keadyForm», что означает, что когда мы нажимаем на нашу кнопку, эта функция будет вызвана и ее функциональность.

Мы собираемся проверить, есть ли наш штат проверки некоторых полей с ошибками валидации путем проверки, если размер нашего состояния валидации больше нуля, и если это так, он не позволит нам отправить форму только возвращением False. Другим шагом является, если наше состояние проверки не имеет никаких ошибок валидации, размер будет нулевой, что означает, что JavaScript Engine будет посещать объем этого, если обладает применением оператора.

В объеме он будет вызывать функцию «Projectfields», которая подтверждает, если наша форма содержит поля без значений внутри, если это так, это не позволит нам отправить форму, если нет, она вернет истину и позволит нам отправить форма.

Я буду введен функциональность функции «пустого поля» на следующих шагах.

Пришло время прыгать в основную функцию, где все начинается. Я собираюсь объяснить функциональность функции «Validateform», размещенную в области «Щивающийся список».

Первое, что мы проходим параметр, который является нашим свойствам «Event.Target», которые мы присваиваемым нашей переменной называемым «входными устройствами». Давайте посмотрим на функцию «ValidateForm».

// Function receives an input with its properties
function validateForm(inputProps) {
    const inputName = inputProps.name;
    const verifyInputName = {
        'username': validationRules().username,
        'password': validationRules().password
    };

    return verifyInputName[inputName](inputProps)
}

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

В объеме у нас есть две постоянные переменные. Первое «inputname» присваивало имя ввода, которое было добавлено к нему как атрибут на элементе HTML. Если вы вернетесь в наш HTML-код, вы увидите, что каждый вход имеет свой атрибут имени. Второй – это буквальный объект, который содержит ключ, названный таким же образом, как атрибут имени каждого входа. Значение ключа ссылается на функции с конкретными правилами проверки для каждого ввода.

Как видите, мы возвращаем результат функции от «ValidationRules». Путем передачи параметра «Inputprops» на одну из функций, мы отправляем все объект входного события к нему. Давайте посмотрим на закрытие «ВалидацияРулс».

// Validation rules for each field in our form.
function validationRules() {
    return {
        username: (inputProps) => {
            const usernameValidationRule = /[A-Za-z0-9]{6,}/;
            const inputValue = inputProps.value;
            const inputName = inputProps.name;
            const isInputValid = usernameValidationRule.test(inputValue);

            isInputValid ? manageState().removeFromState({inputProps, inputName}) : manageState().addToState({inputProps, inputName});

            return true;
        },

        password: (inputProps) => {
            const passwordValidationRule = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[#$^+=!*()@%&]).{8,10}$/g;
            const inputValue = inputProps.value;
            const inputName = inputProps.name;
            const isInputValid = passwordValidationRule.test(inputValue);

            isInputValid ? manageState().removeFromState({inputProps, inputName}) : manageState().addToState({inputProps, inputName});

            return true;
        },

        emptyFields: () => {
            const formInputElems = [...loginForm.elements].filter(item => item.nodeName === 'INPUT');
            for(const inputProps of formInputElems) {
                const inputName = inputProps.name;
                const inputValue = inputProps.value;

                if(!inputValue) {
                    manageState().addToState({inputProps, inputName});
                } 
            }
        }
    }
}

Выше у нас есть наше закрытие, где мы имеем функции, ответственные за проверку определенных входов – первая, которая называется «имя пользователя». Как следует из названия, он отвечает за проверку нашего ввода имени пользователя. Я опишу эту функцию с более глубокой перспективы, и я не буду проходить через функцию «Пароль», потому что она работает так же, как «имя пользователя». Я пойду через “пустые поля”, наверняка.

В нашем функции «Имя пользователя» мы объявляем 4 переменных. Первое «usernamevalidationrule» хранит наше выражение REGEX, которое позволяет пользователю создавать имя пользователя из прописных, строчных букв и цифр. Кроме того, имя пользователя должно иметь не менее 6 символов.

Двигаясь вперед, у нас есть «PhangeValue» и «inputname», я думаю, мне не нужно объяснять те два, как имя и присвоение предлагают все. Последний – «ISINPUTVALID» назначает результат теста Regex, который будет правдой или ложным в качестве логического типа значения.

isInputValid ? manageState().removeFromState({inputProps, inputName}) : manageState().addToState({inputProps, inputName});

Выше Тернарное состояние – последняя операция, которую мы выполняем в нашей функции. Он проверяет, является ли «ISINPUTVALD», если оно есть, он собирается удалить его из состояния, и если он ложно, он добавит наше имя ввода в состояние. Как вы можете видеть, мы используем там функцию «Управление управления», которая имеет «RemoveFromState» и «AddTostate» дочерних функций. Мы передаем два параметра как один объект для упомянутых функций. Мы проходим «входныеPROPS», что является объектом события ввода, а также «inputname», который является атрибутом имени и его значение. Мы вернемся к этим двум функциям, как только я объясню функцию «Projectfields», размещенные в наших «VaveationRules».

Наша первая переменная в области «пустых полей» является «форминпутелам». Он хранит все элементы из нашей формы, которые являются входами. Мы используем оператор распространения для преобразования нашей формы в массив элементов, потому что, в первую очередь, наша форма не является действительным массивом. Следующим шагом является фильтрование всех элементов, которые являются входами.

Следующее, мы проходим все элементы, которые мы отфильтровали и назначаем атрибут имени и значение для разделенных переменных. Последний шаг – проверять, пуст ввод или нет. Если у него нет никакого значения, мы добавим его в состояние и бросьте ошибку; Если это так, мы проигнорируем это. Это было краткое объяснение функции «пустого поля»; Мы собираемся перейти к «управленческому управлению» и взглянуть на свои детские функции.

addToState: (inputData) => {
            const { inputProps, inputName } = inputData;

            validationState.add(inputName);
            manipulateValidationMsg(inputProps);
        },
        removeFromState: (inputData) => {
            const action = 'hide';
            const { inputProps, inputName } = inputData;

            validationState.delete(inputName);
            manipulateValidationMsg({ inputProps, action})
        },

Давайте поговорим о вышеуказанных функциях. Первый – «AddTostate», имеет разрушительное задание в верхней части объема. Параметр, который мы отправляем – «InputData» – это объект, содержащий два свойства. Содержит входныеPROPS и INPUTNAME. Следующим шагом является добавление нашего имени ввода на черный список неверных входов. Мы добавляем наш вход для проверки проверки набора и хранения его там, пока значение ввода не будет действительным. Следующий шаг немного отличается. Мы должны манипулировать нашими сообщениями о проверке, вот где вступает функция «MANIPUTLEVALLVALICALICATICATIDALICAMEMSG». Взгляните на код функции ниже:

// Function manipulates validation messages by toggling them
function manipulateValidationMsg(validationData) {
    const { inputProps, action } = validationData;
    const elementValidationMsg = inputProps.nextElementSibling;
    const validationMsgClasses = elementValidationMsg.classList;
    const removeClass = () => {
        validationMsgClasses.remove('hide');
    };

    const addClass = () => {
        validationMsgClasses.add('hide');
    };

    return action === 'hide' ? addClass() : removeClass();
}

Мы получили нашу функцию для манипулирования сообщениями о проверке. У нас есть два свойства в нашем разрушительном задании, входных устройствах и действиях. Я объясню, какое свойство «Action» заключается в том, когда я перехожу на функцию «RemoveFromState». На следующем шаге мы объявляем переменную, и мы присваиваем этому, следующий брат нашего ввода.

Что это значит? Это означает, что у нас есть определенный шаблон, когда мы создаем нашу форму. Это означает, что наше сообщение валидации должно быть рядом с нашим входом и быть его братом, чтобы правильно работать. Движение вперед, у нас есть наш список классов сообщения о проверке, который необходимо, чтобы скрыть и показать наше сообщение. На следующем шаге мы объявляем две функции, ответственные за удаление и добавление класса «Скрыть» в нашем элементе сообщений.

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

Сейчас это момент, чтобы прыгать сразу в функцию «RemoveFromState». Я не буду проходить через эту функцию, поскольку она имеет тот же код, что и функция «Addtostate», кроме одной детали, которая является нашей «скрытой» классом и параметром «Action».

Наша переменная действия в области функции «RemoveFromState», присваивала «скрыть» класс, который отправляется на функцию, которая манипует нашими сообщениями. Мы используем его для проверки, если мы собираемся добавить Chake Class или удалить его из нашего элемента проверки. Так же просто, вы можете найти целое решение в моем репозитории GitHub.

Валидация государственного управления Github

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

До скорого!

Это руководство было инициально написано: Роберт Возняк – ДЕВ БЛОГ