octaValidate – это библиотека JavaScript, которую я разработал для проверки ваших HTML-форм с использованием правил проверки, сложных регулярных выражений и входных атрибутов формы.
Если вас беспокоит проверка формы на стороне клиента, этот сценарий покроет ее 100%.
Давайте начнем
Загрузите скрипт из моего репозитория GitHub и импортируйте его в свой проект.
Теперь свяжите скрипт на своей странице.
<script src="octaValidate/src/validate.js"></script>
Или вы можете использовать CDN, доступный в репозитории.
ОБРАЗЕЦ РЕГИСТРАЦИОННОЙ БЛАНК
Давайте создадим простую регистрационную форму, в которой мы будем проверять имя пользователя, адрес электронной почты и пароль пользователя.
Вот как выглядит форма
ДОБАВЛЕНИЕ АТРИБУТА OCTAVALIDATE
Основываясь на правилах проверки, которые мы хотим применить к элементу ввода, нам нужно добавить атрибут octavalidate к элементу ввода, а затем предоставить в нем наши правила проверки.
Вот некоторые из правил проверки, которые нам понадобятся:
- R — на входе должно быть указано значение.
- EMAIL — указанное значение должно быть действительным адресом электронной почты.
- ИМЯ ПОЛЬЗОВАТЕЛЯ — значение может содержать буквы, цифры, дефис или знак подчеркивания.
Есть и другие правила проверки, перечисленные в репозитории GitHub.
Теперь давайте добавим эти правила проверки в атрибут octavalidate.
Вы можете видеть, что входные данные формы были изменены, чтобы иметь атрибут octavalidate и список правил проверки, указанных в атрибуте.
В данный момент, когда вы нажимаете кнопку зарегистрироваться, ничего не происходит. Форма, вероятно, будет отправлена. Это потому, что мы еще ничего не сделали в JavaScript.
НАЧАТЬ ПРОВЕРКУ
Чтобы начать проверку конкретной формы, нам нужно:
- Создайте новый экземпляр функции
octaValidate, и передайте идентификатор формы в качестве первого аргумента, а затем любой параметр конфигурации в качестве второго аргумента.
let formVal = new octaValidate('form_register');
- Затем вызовите метод validate(), чтобы начать проверку.
formVal.validate();
Тип возвращаемого значения этого метода — логический.
- true: это означает, что ошибок проверки нет.
- false: это означает, что есть ошибки проверки.
В нашем случае мы хотим, чтобы форма проверялась при отправке.
Так вот что я буду делать.
Вот полный код
ПРОВЕРКА ФОРМЫ
Теперь давайте проверим нашу регистрационную форму. Скопируйте приведенный выше код и вставьте его в редактор кода.
Вот что я получаю, когда нажимаю кнопку отправить
Идеальный!
Как вы думаете, какое правило проверки работает здесь?
Вы правы. Это обязательное правило (R).
Если вы посмотрите на правила проверки, применяемые к входным данным формы, вы заметите, что все они имеют R, что означает обязательное правило.
Мы можем изменить сообщение проверки, используя атрибут ov-required:msg.
Вот как выглядит форма
Если мы снова отправим форму, вот что вы увидите
Обратите внимание, что сообщение больше не "Это поле обязательно для заполнения", а заменено настраиваемым сообщением.
ТАМОЖЕННЫЕ ПРАВИЛА ПРОВЕРКИ
Я уверен, что вы, должно быть, играли с формой, но заметили ли вы, что из двух правил проверки, [R, PASS]предусмотренных для ввода пароля, только обязательное правило был функционален?
Да, вы правильно прочитали! И это потому, что PASS, который также является правилом проверки, еще не существует.
Одна интересная особенность octaValidate заключается в том, что у вас есть все возможности для создания собственных правил проверки.
Теперь давайте определим пользовательское правило проверки с именем PASS, которое мы будем использовать для проверки ввода пароля.
Чтобы определить пользовательское правило проверки, мы вызовем метод customRule(), а затем передадим аргументы (RULE_TITLE, REG_EXP, ERROR_TEXT).
- RULE_TITLE: само пользовательское правило проверки.
- REG_EXP: это регулярное выражение, которое будет использоваться в этом правиле проверки.
- ERROR_TEXT: это сообщение, которое пользователь увидит, если во время проверки это правило не будет выполнено.
Поскольку это образец регистрационной формы, я бы хотел, чтобы пользователь указал 12345 в качестве пароля, вот регулярное выражение для этого /^12345+$/.
Поэтому я буду вызывать метод следующим образом:
formVal.customRule('PASS', /^12345+$/, 'Enter 12345');
В JavaScript при создании или использовании регулярных выражений нам не нужно предоставлять выражение в виде строки. Ядро JavaScript изначально распознает регулярные выражения.
Вот как будет выглядеть наш скрипт с определенным пользовательским правилом.
ПРОВЕРКА НАШЕГО ПОЛЬЗОВАТЕЛЬСКОГО ПРАВИЛА
Теперь давайте сохраним файл и снова отправим форму. На этот раз мы предоставим значения для входных данных формы.
Это то, что я получаю
Вы можете видеть, что я получил сообщение о необходимости указать 12345, потому что введенное значение не соответствует правилу проверки.
Вы можете добавить дополнительные настраиваемые правила проверки, используя один метод. Ознакомьтесь с файлом Readme для реализации.
ВВОДНЫЕ АТРИБУТЫ ФОРМЫ
Теперь нам нужно убедиться, что пользователь указывает точно такое же значение в поле пароля и в поле повторного ввода пароля, используя атрибут equalto.
Вот поля ввода пароля и повторного ввода пароля
Затем, если мы отправим форму, предоставив неправильное значение для поля повторного ввода пароля, это то, что я получаю.
Это произошло потому, что мы предоставили id для вводимого пароля в качестве значения для атрибута equalto в поле повторно введите пароль. strong>, и при этом поле повторного ввода пароля сравнивает свое значение со значением в поле пароля.
Вы также можете использовать атрибуты длины для проверки max-length, min-length или length входных значений формы.
Подробнее о проверке длины в файле Readme.
ФУНКЦИЯ ОБРАТНОГО ЗВОНКА
Теперь мы можем определить функцию, которая будет выполняться при сбое проверки формы или при прохождении проверки формы.
Чтобы использовать функцию обратного вызова, определите функцию и передайте ее в качестве аргумента этому методу validateCallBack(). .
Вот как вызвать метод.
formVal.validateCallBack(success_callback, error_callback);
СТАТУС ФУНКЦИЯ
Вы можете проверить количество ошибок проверки в конкретной форме, вызвав метод status().
formVal.status();
ВАРИАНТЫ КОНФИГУРАЦИИ
Есть два параметра конфигурации по умолчанию, которые вы можете настроить, чтобы получить максимальную отдачу от этого мощного скрипта.
- successBorder: этот параметр включает зеленую рамку успеха для определенного элемента, если его проверка прошла успешно.
- strictMode: этот параметр обрезает лишние пробелы в начале и конце ввода формы и запрещает пользователю указывать специальные ключевые слова в качестве значения.
Вот как это использовать.
let formVal = new octaValidate(FORM_ID, CONFIGURATION);
Две опции отключены по умолчанию, чтобы включить их, нам нужно передать их в качестве второго аргумента экземпляру функции.
Вот обновленный скрипт
Итак, давайте попробуем отправить форму еще раз, указав в качестве значения null, NaN,илиundefined.
Вы можете видеть, как работает наш строгий режим.
Теперь давайте проверим, работает ли граница успеха, указав правильное значение для поля имени пользователя.
Оно работает!
Есть много вещей, которые можно сделать с этим мощным скриптом.
ДЕМО ВИДЕО
Вот видео о том, как я проверил свою форму.
Вы можете протестировать демо-форму на этой демонстрационной странице.
Подробнее об этом мощном скрипте и о том, как его использовать, читайте в ReadMe file.
ЭТАЛОННЫЕ МЕТОДЫ
- validate(): этот метод начнет проверку формы.
- customRule(): этот метод позволяет определить собственное правило проверки.
- validateCallBack(): этот метод позволяет определить функцию обратного вызова.
- status(): используйте этот метод для проверки количества ошибок проверки в форме.
Не стесняйтесь вносить свой вклад в репо!
Я хотел бы прочитать ваши предложения и функции о том, как мы можем улучшить этот сценарий.
День запуска 🎉🎉🎉 Ознакомьтесь с разделом octaValidate on product hunt
Посетите документацию этой БОЛЬШОЙ библиотеки
Спасибо за чтение.
Создавайте компонуемые веб-приложения
Не создавайте веб-монолиты. Используйте Bit для создания и компоновки несвязанных программных компонентов — в ваших любимых фреймворках, таких как React или Node. Создавайте масштабируемые интерфейсы и серверные части с мощным и приятным опытом разработки.
Перенесите свою команду в Bit Cloud, чтобы совместно размещать и совместно работать над компонентами, а также значительно ускорить, масштабировать и стандартизировать разработку в команде. Начните с компонуемых интерфейсов, таких как Design System или Micro Frontends, или исследуйте компонуемый сервер. Попробуйте →
