Основы проверки формы в Joomla 4

Информация о материале: Родительская категория: CMS — движки сайтов; Категория: Joomla 4

Вступление

Joomla 4 имеет скрипт проверки правильности ввода данных в формы на стороне клиента, который может использоваться и расширяться любым компонентом. Эта статья о том, как он работает и как его использовать. Существует четыре стандартных валидатора для типов полей: имени пользователя, пароля, цифр и электронной почты. Существует также валидатор шаблонов более общего назначения и валидатор обязательных полей.

Обратите внимание, что современные браузеры также обеспечивают проверку формы по умолчанию. Проверку браузера можно отключить, включив novalidate в тег формы form.

Как вызвать проверку формы в Joomla 4

В начале файла edit.php содержится код генерации формы, который включает вызов для загрузки файла JavaScript валидатора:

/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */
$wa = $this->document->getWebAssetManager();
$wa->useScript('keepalive')
	->useScript('form.validate');

в теге form формы обязательно укажите атрибут class="form-validate". Этот пример взят из формы редактирования пользователя:

<form action="<?php echo Route::_('index.php?option=com_users&layout=edit&id=' . (int) $this->item->id); ?>" 
	method="post" name="adminForm" id="user-form" 
	enctype="multipart/form-data" 
	aria-label="<?php echo Text::_('COM_USERS_USER_FORM_' . ( (int) $this->item->id === 0 ? 'NEW' : 'EDIT'), true); ?>" 
	class="form-validate">

В xml-файле манифеста формы содержатся инструкции, вызывающие проверку отдельных полей. Этот пример-поле электронной почты пользователя:

<field
	name="email"
	type="email"
	label="JGLOBAL_EMAIL"
	required="true"
	size="30"
	validate="email"
	validDomains="com_users.domains"
/>

Специальные выражения для проверки формы в Joomla 4

Этот раздел предназначен для того, чтобы дать некоторое представление о выражениях проверки, чтобы помочь объяснить использование валидации различных типов полей форм в Joomla 4. Все они включены в код файла validator.js.

Проверка правильности ввода имени пользователя

this.setHandler('username', value => {
      const regex = new RegExp('[<|>|"|\'|%|;|(|)|&]', 'i');
      return !regex.test(value);
    });

Здесь выражение ищет вхождение любого из недопустимых символов в наборе символов [] и возвращает false (недопустимо), если таковые найдены.

Проверка правильности ввода пароля

this.setHandler('password', value => {
      const regex = /^\S[\S ]{2,98}\S$/;
      return regex.test(value);
    });

Здесь выражение ищет начальный символ, который должен не быть пробельным символом, за которым следуют от 2 до 98 символов, которые либо не являются пробелом, либо пробелом, и заканчиваются символом, не являющимся пробельным символом. Joomla 4 имеет более сложную проверку паролей, которая обеспечивает сочетание типов символов и минимальной длины.

Проверка правильности ввода электронной почты

this.setHandler('email', value => {
      const newValue = punycode.toASCII(value);
      const regex = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
      return regex.test(newValue);
    }); // Используйте все теги form с атрибутом class='form-validate'

Здесь регулярное выражение принимает любую строку, которая начинается с одного или нескольких символов в последовательности символов [], за которым следует @, за которым следует любой один или несколько символов во второй последовательности символов [], за которым следует ноль или более полных остановок, за которыми следует один или несколько символов в третьей группе символов и заканчивается одной из групп после @.

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

Проверка правильности ввода числовых значений

this.setHandler('numeric', value => {
      const regex = /^(\d|-)?(\d|,)*\.?\d*$/;
      return regex.test(value);
    });

Здесь введённое значение из формы должно начинаться с цифры или знака минус ноль или один раз, за ним следует цифра или запятая ноль или более раз, за которой следует перебор совпадений ноль или один раз, заканчивающаяся цифрой ноль или более раз. Таким образом, это будет соответствовать 3.142 или -10 или 100,000.0 и так далее. Фактическое число должно соответствовать любому типу поля в базе данных. Выражение не обрабатывает числа с экспонентами, поэтому 10e2 будет отклонено.

Задание шаблонов полей форм в Joomla 4

Предположим, вы хотите, чтобы поле ввода было положительным целым числом. Вы можете использовать свой собственный шаблон, помещенный в xml-файл формы:

<field 
	name="number" 
	type="text" 
	label="COM_MYCOMPONENT_CAMP_NUMBER_LABEL"
	description="COM_MYCOMPONENT_CAMP_NUMBER_DESC"
	class="w-auto"
	required="true" 
	pattern="\d+"
/>

В этом примере шаблон допускает одну или несколько цифр. Таким образом, -1 будет недействительным, как и 3.142.

Обязательные для ввода поля формы в Joomla 4

Для того, чтобы информировать пользователя о том, что поле должно быть обязательно заполнено, включите required="true" в спецификацию поля, иначе в метке формы будет опущен маркер *, используемый для указания обязательных полей. Включение required в атрибут тега формы form недостаточно.

Перевод с английского:
https://docs.joomla.org/Joomla_4_Tips_and_Tricks:_Form_Validation_Basics

Заберите ссылку на статью к себе, чтобы потом легко её найти!
Раз уж досюда дочитали, то может может есть желание рассказать об этом месте своим друзьям, знакомым и просто мимо проходящим?
Не надо себя сдерживать! ;)