Лучшие данные - это проверенные данные… Верно!

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

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

Проверка формы была привередливым делом с момента появления Интернета.
Сначала была приведена сводка ошибок проверки на стороне сервера. Затем мы перешли к проверке на стороне клиента, чтобы проверить результаты на лету.

Проверка на стороне клиента обычно означает: JavaScript перехватывает форму перед ее отправкой для проверки на наличие ошибок, возможно, с использованием регулярного выражения. Кроме того, он улучшает взаимодействие с пользователем, обеспечивая быструю обратную связь, иногда даже до того, как пользователь нажимает кнопку «Отправить», а также помогает снизить нагрузку на сервер и полосу пропускания за счет меньшего количества циклов приема-передачи.

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

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

Итак, представляем «Джой» 😄

Joi - самый мощный язык описания схем и валидатор данных для JavaScript. Он позволяет описывать данные простым, интуитивно понятным и читаемым языком.

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

Joi был разработан для серверных скриптов. Итак, для проверки объекта во внешнем интерфейсе браузера мы будем использовать joi-browser.
Возможно, в будущем joi-browser будет интегрирован в joi, и у нас будет полный пакет в одном.

А сейчас давайте обсудим “joi-browser”, который представляет собой объединенную для браузера проверку схемы объекта (в виде бабелизированной и объединенной).

Итак, мы просто определяем схему того, что мы ожидаем от объекта.
Например, давайте рассмотрим простую форму регистрации, состоящую из имени, имени пользователя и пароля.
И что была бы схема Joi! 🤔

schema = {
     name: Joi.string().required().label("Name"),
     username: Joi.string().required().email({ minDomainAtoms: 2 
         }).label("Username"),                                      
     password: Joi.string().required().min(5).label("Password")
};

Итак, что говорит нам схема?
Она говорит нам, что «имя» должно быть строкой, и это обязательное поле. Точно так же у нас есть «имя пользователя», которое должно быть строкой и снова обязательным полем. А также у нас есть .email (), который проверяет, соответствует ли ввод стандартному формату электронной почты. Здесь мы используем .email ([параметры]), потому что нам нужно указать некоторые дополнительные настройки. Смотрите ниже снимок экрана для более подробной информации.

И, наконец, у нас есть «пароль», который должен быть обязательной строкой минимум из 5 символов.

Мы определили нашу схему, теперь нам нужно знать, как проверять объекты с ее помощью. Мы можем сделать это с помощью validate() метода Джои.

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

Итак, предположим, что мы обрабатываем события onChange и onSubmit.

Итак, для onChange у нас есть

validatePropery = (name, value, schema) => {
    const obj = {
        [name]: value
    };
    const fieldSchema = {
        [name]: schema[name]
    };
    //return result
    const result = Joi.validate(obj, fieldSchema);
    // result.error === null -> valid
}

а для onSubmit у нас есть

validate = (data, schema) => {
    const options = {
        abortEarly: false
    };
    const result = Joi.validate(data, schema, options);
    // result.error === null -> valid
};

Это все, что вам нужно сделать 😃. Просто определите схему и передайте данные и схему в Joi.validate (), остальную работу выполнит Joi.

Вы можете использовать result.error, чтобы получить подробную информацию об ошибке и отобразить ее пользователю.

Итак, добавляем фрагмент регистрационной формы из одной из моих сборок приложения с использованием React и Node.js.

Спасибо, что дочитали до этого места. Я только что представил Joi, но с этой библиотекой можно сделать гораздо больше.

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

Надеюсь, вы повеселились и узнали здесь что-то новое. 😄

Целью этой статьи было познакомить вас с «Джой». Теперь вы можете применить его к своим проектам и получить основу для изучения других областей пакета.

Установите joi-browser через npm с помощью следующей команды:

npm install joi-browser

Joi - действительно мощная библиотека. Это пакет, который никуда не денется; безопасная ставка для ваших требований к валидации.

Наконец, обратитесь к проекту Github, чтобы изучить исходный код:



hapijs / joi
office: самая мощная библиотека проверки данных для JS - hapijs / joi github.com