04 - Проверка на стороне клиента
Проверка на стороне клиента выполняется с помощью javascript, запущенного в браузере пользователя. Однако важно подчеркнуть, что этого недостаточно для обеспечения безопасности вашего веб-сайта, поскольку хакеры могут использовать утилиты, такие как curl, для отправки данных формы непосредственно на ваш сервер, минуя вашу проверку. Таким образом, вам всегда нужна надежная проверка на стороне сервера.
Вы можете встроить проверку на стороне клиента в свои формы, выполнив следующие 3 шага:
- Включите библиотеку Joomla validate javascript через Web Asset Manager :
Factory::getApplication()->getDocument()->getWebAssetManager()->useScript('form.validate');
Если вы записываете эту строку в файле tmpl, то обычно у вас будет Document
Доступно:
$this->document->getWebAssetManager()->useScript('form.validate');
Эта строка приведет к тому, что файл media/system/js/fields/validate.js будет отправлен в клиентский браузер.
- Укажите, что вы хотите, чтобы проверка выполнялась в вашей форме, добавив класс form-validate:
<form class="form-validate"> ... </form>
- Укажите проверку, которую вы хотите применить к полю формы. Вы делаете это в XML-файле определения формы, добавляя класс
validate-...
в поле. Например, чтобы указать, что поле телефонного номера должно быть числовым:
<field name="telephone" type="telephone" class="inputbox validate-numeric" ... />
Существует 4 типа проверки, которые вы можете использовать:
- validate-username
- validate-password
- validate-numeric
- validate-email
Все они используют регулярное выражение javascript для проверки значения, введенного пользователем. (Если вам нужно проверить детали используемого регулярного выражения, вы можете посмотреть в media/system/js/fields/validate.js, в конструкторе класса JFormValidator).
Обратите внимание, что если вы используете поле формы type="email"
затем validate-email
класс будет добавлен автоматически. (Однако вам все равно придется добавить шаги 1 и 2 выше, чтобы это сработало).
Также, если вы укажете, что это поле является обязательным, например:
<field name="telephone" type="telephone" required="true" ... />
Затем javascript также проверит, что в поле было введено значение.
Проверка выполняется всякий раз, когда вы нажимаете на кнопку в форме, которая относится к сохранению данных, например:
<button type="button" class="btn btn-primary" onclick="Joomla.submitbutton('myform.submit')">Submit</button>
и проверка запускается в функции Javascript Joomla.submitbutton.
У вас также может быть кнопка отмены, которая не запускает проверку:
<button type="button" class="btn btn-primary" onclick="Joomla.submitbutton('myform.cancel')">Cancel</button>
При создании кнопок панели инструментов только те, которые связаны с сохранением данных, имеют class="form-validation"
атрибут добавлен к HTML-элементу кнопки. Когда кнопка нажата, ее class
атрибут отмечен. Если form-validation
класс присутствует, тогда javascript Joomla.submitbutton
функция вызывается с помощью validate
параметр установлен на true
. В противном случае он вызывается с помощью validate
установлено значение false
.
Пользовательская проверка с использованием шаблона
Для таких полей , как type="text"
и type="telephone"
(которые относятся к html <input>
элемент) вы можете указать регулярное выражение javascript, которому должны соответствовать введенные пользователем данные. Например
<field name="message" type="text" pattern="[^x]+" ... />
данные будут отклонены, если в поле есть буква "x".
Это относится только к проверке на стороне клиента! Это не влияет на проверку на стороне сервера!
Пользовательская процедура проверки
Вы можете написать свою собственную функцию проверки на javascript следующим образом.
- Шаг 1 Напишите функцию js. (Хотя ниже используется регулярное выражение, вы, очевидно, не ограничены этим).
jQuery(function() { document.formvalidator.setHandler('message', function (value) { regex=/^[^y]+$/; return regex.test(value); }); });
Вы должны хранить все файлы js в папке media, например, как media/js/validate-message.js в структуре каталогов разработки вашего компонента.
- Предполагая, что вы пишете это для компонента
com_example
, включите файл js в свой список ресурсов media / joomla.asset.json. Код зависит отform.validate
ввод и выполнение jquery:
{ "name": "com_example.validate-message", "type": "script", "uri": "com_example/validate-message.js", "dependencies": [ "form.validate", "jquery" ], "attributes": { "defer": true }, "version": "1.0.0" }
- Включите ваш актив в свой код, например, в ваш файл tmpl:
$this->document()->getWebAssetManager()->useScript('com_example.validate-message');
- В вашем XML-файле определения формы укажите поле, к которому должна быть применена эта проверка
<field name="message" type="text" class="inputbox validate-message" ... />
Это относится только к проверке на стороне клиента! Это не влияет на проверку на стороне сервера!