Термин «проверка JavaScript» несколько вводит в заблуждение, поскольку описывает процесс оказания помощи пользователям в правильном заполнении форм. Фактически, внутренний код выполняет проверку — JavaScript просто предоставляет помощь. Но когда подтверждение и помощь не приходят из одного и того же источника, они лишь смущают людей.
Веб-формы — это средство, с помощью которого HTML стал интерактивным. Именно через формы веб-приложения получают информацию от конечных пользователей. Иногда этот поток информации может быть непринужденным, спокойным и неограниченным. В других случаях поток информации необходимо проверять, чтобы убедиться, что данные веб-формы имеют правильный формат, в частности, такие как адреса электронной почты, адреса доставки и номера кредитных карт. Мы все знаем, что ключом к хорошим данным является проверка на стороне сервера, и что проверка на стороне пользователя с использованием JavaScript помогает пользователю сделать все правильно, не дожидаясь обхода сервера. Разработчики уже объединили функциональность JavaScript с их внутренней проверкой. Однако большинство рассматривает эти формы проверки, как если бы они были одной и той же задачей, используя разные технологии.
Строго говоря, валидация JavaScript — это не проверка, а помощь при вводе. Любой может обойти JavaScript; это помощь, а не ворота. Это просто помогает придать вашим пользователям уверенность при нажатии на эту большую кнопку отправки.
Помощь при вводе JavaScript, когда она создается отдельно от внутренней проверки, не идеальна. В худшем случае эти две функциональные возможности работают по-разному, и то, что действует на стороне клиента, недопустимо на сервере. В лучшем случае они работают нормально — изначально. Но с логикой проверки в нескольких местах возрастает вероятность того, что только одна обновится, когда потребуются изменения, и в этот момент мы получим противоречивые результаты.
И, наконец, необходима внутренняя проверка. Помощь JavaScript хороша .
Время кода
Имея все это в виду, я создал Y-Validator, используя PHP5 для бэкенда. Есть тестовая версия, с которой можно поиграть, и вы можете скачать код, чтобы следовать, если хотите.
В PHP мы определяем валидацию путем создания экземпляра объекта yValidate :
<?php require('y-validate.php'); $v = new yValidate(); $v->add('name','+NAME','namefeedback','Required, valid names are letters, numbers and '-()?'');?>
Библиотека y-validate.php содержит класс yValidate . Мы начинаем с подачи объекта различных входных данных, которые нуждаются в проверке с помощью функции add() :
- Первый параметр — это идентификатор или
Nameполя; переключатели и флажки используют Name (и[]используется для флажков, чтобы PHP получал массив значений), в то время как все другие поля используют ID. - Второй параметр — это тип проверки, определенный в закрытой переменной объекта
regValidations, которая сопоставляет строку параметра с регулярным выражением для проверки. Это префикс+для обязательных полей. - Третий параметр указывает идентификатор тега, в который помещается обратная связь.
- Четвертый параметр — это текст сообщения, который сообщает пользователю, что ожидается.
С этого момента проверка представленного кода заключается в передаче переменной $_POST через $v->validateAll($_POST) . Он использует сопоставления, определенные в $v->add(...) для проверки ввода, возвращая true или false при проверке, плюс массив ошибок, если применимо. Вот и весь конец зашит!
<script type="text/javascript" src="y-validate/js/y-validate.js"></script> <script type="text/javascript"> <?php echo $v->buildJS(); ?> <?php $v->jsValidations(); ?> </script>
Когда мы создаем внешний интерфейс для захвата ввода, мы включаем внешний сценарий y-validate.js . Это создает класс, который похож на скрипт PHP выше. Чтобы связать две проверки, мы вызываем два метода объекта PHP. Во-первых, $v->buildJS создает экземпляр класса проверки JavaScript как объект и присоединяет проверки типа проверки к полям и кнопке отправки, которые были присоединены к объекту PHP с помощью $v->add(...) . Во-вторых, jsValidations подготавливает window.onload для присоединения тех же отношений Name + Regular Expression, которые содержатся в объекте PHP, к полям формы.
Важно отметить, что метод jsValidations гарантирует, что проверка для серверной части станет проверкой поддержки на jsValidations стороне. Обновите серверную часть, а также обновите интерфейс, что означает, что проверка не может выйти из строя.
<label for="name">Your name <?php echo $v->fieldFeedback('name','namefeedback',$namefeedback);?></label> <input type="text" name="name" id="name" value="<?php if (isset($name)) echo $name;?>" />
Как внутренний, так и внешний код должен иметь возможность информировать пользователя в случае возникновения проблемы с вводом. Естественно, что у самих полей есть метки, и это идеальное место для обратной связи с пользователями, когда ввод требует корректировки. fieldFeedback принимает три параметра:
- Первое — это поле, к которому относится обратная связь.
- Второй — это идентификатор
<em>нужно создать, чтобы получить обратную связь; это соответствует третьему параметру$v->add(...). - Третий параметр — это начальная подсказка, определенная в четвертом параметре
$v->add(...).
Таким образом, помимо второго параметра в $v->add(...) который устанавливает валидацию для использования, параметры между этими двумя сопоставлениями красиво сочетаются.
Использование единого местоположения для обратной связи означает, что у пользователя есть одно место для поиска помощи, независимо от того, включен JavaScript или нет. Поскольку возможности проверки и помощи ввода создаются из одного и того же объекта, текст обратной связи идентичен как для проверки, так и для помощи ввода. Также, чтобы подчеркнуть вспомогательный характер внешней проверки, сообщение обратной связи помещается в поле обратной связи до того, как произойдет какое-либо взаимодействие. Это заранее запрашивает у пользователя ожидаемый формат, позволяя ему понять его с первого раза.
Как только страница загрузится, событие window.onload запускается и связывает помощь ввода JavaScript со всеми полями и кнопкой отправки; это было установлено в $v->jsValidations . Когда пользователь вносит изменения в поле, события JavaScript, присоединенные window.onload , window.onload , проверяя значения с помощью настроенных регулярных выражений.
Уже там
Я использовал PHP для своей библиотеки (см. Ниже), но и другие языки и фреймворки натолкнулись и на эту идею:
- PHPCake имеет расширение под названием JS Validator ; это полагается на AJAX для внутренней проверки.
- Ruby on Rails использует AJAX для прямой проверки валидации на внутреннюю.
- В настоящее время ведется работа над CodeIgniter .
- У Питона есть умный парень, который выпустил библиотеку примерно в то же время, когда я начал работать над этим.
Помимо решения Python, большинство валидаторов для этой концепции используют AJAX для отправки полей обратно на сервер для проверки. Поскольку требования валидации обычно не меняются в течение нескольких секунд после запроса страницы и ввода данных пользователем, это дополнительные издержки для валидации каждого поля. Кроме того, эти сценарии не используют лучший способ помочь пользователю — сначала сказать ему, что ожидается. Прикрепляя английское описание проверки к каждому полю и делая его первым полезным подсказкой для подсказки пользователю, что нужно вводить, мы помогаем пользователю сделать это правильно с первого раза. Сколько раз вы смотрели на форму и рычали: «Почему ты не сказал мне об этом, когда я начинал?»
Вывод
Использование центрального объекта для управления задачами проверки и ввода помогает создать согласованный пользовательский интерфейс даже при отключенном JavaScript.
- У нас есть одно место для обновления как расширения (помощь JavaScript), так и требуемой функциональности (внутренняя проверка). Таким образом, эти два не могут выйти за рамки, и мы можем обеспечить бесперебойную работу для пользователя.
- У нас есть одно место, где можно найти усовершенствование, поэтому будущие разработчики нашего кода не будут смущать расположением точек, в которых в коде реализованы различные проверки и подсказки.
- Кодекс также способствует отделению поведения от представления. Программист программирует валидацию, а дизайнер реализует представление обратной связи.
- Пользователь чувствует больше контроля, будучи уверенным в нажатии большой кнопки отправки.
Не забывайте: код для PHP-Validate и образец формы доступны для скачивания .