Компонент Delphi MaskEdit (Шаблон ввода) расположен на странице Additional Палитры компонентов. Он также, как и компонент Edit , является однострочным редактором. Но вдобавок к свойствам и функциям компонента Edit, MaskEdit дает дополнительную возможность ввода текста по заданному шаблону.

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

Шаблон (маска) задается с помощью свойства EditMask и состоит из трех полей разделенных между собой символами точка с запятой. В первом поле находиться сам шаблон (маска). Второе поле определяет, войдут ли вспомогательные символы в итоговый текст (по умолчанию 1). Если стоит 0, то они не будут в итоговом результате, а видны на дисплее при редактировании. Любой иной символ разрешает такое включение. Третье поле отвечает за вывод незаполненных (пустых) символов в поле ввода (по умолчанию это символ подчеркивания). При не заданных значениях второго и третьего полей, действуют значения по умолчанию.

В шаблоне (маске) используются следующие специальные символы:

  • ! - Наличие этого символа в маске означает, что необязательные символы вставляются перед шаблоном, если отсутствует то после шаблона;
  • >- символы, следующие за этим символом переводятся в верхний регистр;
  • < - символы, следующие за этим символом, переводятся в нижний регистр;
  • <> - прекращение преобразования символов;
  • \ - символ следующий далее вставляется в шаблон (маску). Это необходимо для того чтоб произвольные символы могли быть частью шаблона;
  • L - в данной позиции должна стоять буква;
  • I - в данной позиции разрешен ввод буквы, но возможно ничего не вводить;
  • A - в данной позиции возможен ввод цифры или буквы;
  • a - возможно в данной позиции вставить цифру, букву или оставить пустой;
  • C - в данной позиции возможен ввод любого символа;
  • 0 - в данную позицию необходимо ввести цифру;
  • 9 - в данной позиции может находиться цифра или она будет пустой;
  • # - в данной позиции может быть цифра, +, -. Позиция может быть оставлена пустой;
  • : - используется для разделения часов, минут и секунд в показаниях времени;
  • _ - в данном месте автоматически будет вставлен пробел.

Символы не описанные выше вставляются в результирующий текст без изменений.

Для вызова редактора маски делаем двойной щелчок в области многоточия. Вид данного редактора показан ниже.

Маску можно выбрать из образцов в поле Sample Masks или ввести вручную в поле Input Mask. Легче выбрать из образцов наиболее близкую маску и отредактировать ее. Поле Character for Blanks задает вид незаполненной позиции во входной строке. Значок Save Literal Characters отвечает за включение в маску литеральных символов. В поле Test Input проверяется функциональность маски и мы можем увидеть какой будет вид пустого поля в приложении.

Итог: мы рассмотрели компонент MaskEdit и его предназначении в приложении.

P.S. Пример - расположим на форме простую кнопку. Добавим по 2 компонента MaskEdit и Edit. Свойство EditMask у компонентов будут такими: и

«Защитой от дурака» называется комплекс мер по пресечению ввода неправильной информации в форме. Например, если в поле требуется ввести положительное число от 0 до 10, то следует проверить, чтобы пользователь не ввёл текст или число, которое не лежит в указанном диапазоне, т. е. число не должно быть меньше нуля и больше десяти.

Почему происходит ввод неправильной информации? Это в основном совершается по трём причинам.

  1. Пользователь ошибся случайно, например, невнимательно прочитал что ему требуется указать.
  2. На веб-странице неоднозначно просят ввести данные, поэтому пользователю приходится гадать и делать предположение, что же в действительности от него хотят. При этом не всегда происходит совпадение мнений разработчика и пользователя.
  3. Есть ряд людей, которые воспринимают инструкции как вызов и стараются поступить наоборот. Такие пользователи рассуждают примерно так: «Ага, меня просят ввести число. А что будет, если я укажу буквы?». После чего задают явно неправильную информацию и смотрят, к чему это приведёт.

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

Обязательное поле

Некоторые поля формы должны быть обязательно заполнены перед их отправкой на сервер. Это, к примеру, относится к форме регистрации, где требуется ввести логин и пароль. Для указания обязательных полей используется атрибут required , как показано в примере 1.

Пример 1. Атрибут required

Обязательное поле

Логин:

Пароль:

Обязательные поля должны быть заполнены перед отправкой формы, иначе форма на сервер не пересылается и браузер выдаст об этом предупреждение. Вид сообщения зависит от браузера (рис. 1).

Рис. 1. Обязательное поле не заполнено

Корректность данных

Исходно имеется два поля в котором вводимые пользователем данные проверяются автоматически. Это веб-адрес и адрес электронной почты. Для этих элементов характерны следующие правила.

  • Веб-адрес ( ) должен содержать протокол (http://, https://, ftp://).
  • Адрес электронной почты ( ) должен содержать буквы или цифры до символа @, после него, затем точку и домен первого уровня.

У браузеров несколько различается политика по проверке данных пользователя. Chrome и Opera требуют, чтобы в почтовом адресе была точка, для Firefox она не обязательна.

В примере 2 показана форма с обязательными полями, в которой два поля проверяется браузером.

Пример 2. Корректность данных

Корректность данных

Заполните форму (все поля обязательны)

Имя:

Email:

Сайт:

Что происходит в Opera при вводе неверных данных показано на рис. 2.

Рис. 2. Предупреждение о неправильных данных

Шаблон ввода

Некоторые данные нельзя отнести к одному из видов элементов формы, поэтому для них приходится использовать текстовое поле. При этом их ввод происходит по определённому стандарту. Так, IP-адрес содержит четыре числа разделённых точкой (192.168.0.1), почтовый индекс России ограничен шестью цифрами (124007), телефон содержит код города и конкретное количество цифр часто разделяемых дефисом (391 555-341-42) и др. Браузеру необходимо указать шаблон ввода, чтобы он согласно нему проверял вводимые пользователем данные. Для этого используется атрибут pattern , а его значением выступает регулярное выражение. Некоторые типовые значения перечислены в табл. 1.

Табл. 1. Регулярные выражения
Выражение Описание
\d Одна цифра от 0 до 9.
\D [^0-9] Любой символ кроме цифры.
\s Пробел.
Только заглавная латинская буква.
Только латинская буква в любом регистре.
[А-Яа-яЁё] Только русская буква в любом регистре.
Любая буква русского и латинского алфавита.
{3} Три цифры.
{6,} Не менее шести латинских букв.
{,3} Не более трёх цифр.
{5,10} От пяти до десяти цифр.
^+$ Любое слово на латинице.
^[А-Яа-яЁё\s]+$ Любое слово на русском включая пробелы.
^[ 0-9]+$ Любое число.

В примере 3 просят ввести шестнадцатеричное значение цвета (#ffcc00) и если оно не лежит в этом диапазоне, браузер выводит сообщение об ошибке.

Пример 3. Шаблон ввода

Ввод цвета

Введите шестнадцатеричное значение цвета (должно начинаться с #)

На рис. 3 показано предупреждение о неверном формате ввода.

Рис. 3. Введённые данные не соответствуют шаблону

Отмена валидации

Валидация не всегда требуется для формы, разработчик может пожелать использовать универсальное решение на JavaScript и дублирующая проверка браузером ему уже ни к чему. В подобных случаях необходимо отключить встроенную валидацию. Для этого применяется атрибут novalidate элемента

. В примере 4 показано использование этого атрибута.

Пример 4. Отмена валидации

Атрибут novalidate

Для аналогичной цели применяется и атрибут formnovalidate , который добавляется к кнопке для отправки формы, в данном случае к . Тогда форма из примера 4 будет иметь следующий вид.

Для ускорения ввода данных на кассе придумано много технологий и устройств. Причём устройств существенно меньше. Фактически помимо клавиатуры данные можно вводить с помощью сканера штриховых кодов и считывателя магнитных карт. А вот технологий существенно больше и хоть все они базируются на штриховых кодах и магнитных картах, но сферы применения и задачи различаются очень сильно. С помощью штриховых кодов печатают номера чеков, подарочные купоны, коды товаров на этикетках, карточки персонала. Магнитные карты используются в качестве платёжных, скидочных, пропускных. И это только общеупотребительные, можно автоматизировать на их основе какие-то уникальные именно для вашего предприятия процессы.

Всё это сильно упрощает жизнь кассира, избавляет от ошибок при вводе и увеличивает скорость работы. Однако, чем больше процессов у вас используется, тем сильнее путаница. Как понять, что делать системе когда считали штриховой код - пробить товар с таким кодом или применить купон со скидкой? Дать однозначный ответ на этот вопрос, увы, нельзя. Необходимо вмешательство человека. Выяснять это у кассира во время считывания, значит свести на нет все плюсы автоматизации - потеряем время и дадим потенциальную возможность кассиру ошибиться. Значит нужно ответы на такие вопросы дать заранее, настроить систему так, чтобы в момент считывания кода было понятно что и как делать дальше.

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

Сопоставление

Рассмотрим простейший пример - штриховые коды используются только для маркировки товаров. Больше нигде технология не используется. Значит всё, что было считано сканером должно трактоваться как код товара. Это уже повод сформулировать первый шаблон.

Всё, что считано со сканера есть штриховой код товара .

Теперь превратим это в настройки. В секции "Источник данных" включим "Считыватель штриховых кодов". В секции "Формирование шаблона" добавим блок с произвольным содержимым. Для этого существуют два поля ограничивающих длину, в первое поле впишем 1, второе поле оставим пустым и добавим блок. Таким образом мы сообщили системе, что нас устраивает, любой (длиной минимум один символ и дальше без ограничений) код считанный сканером.

Однако мы быстро выясним, что нам не хватает особой обработки весовых штриховых кодов. Система попросту трактует их как обычные коды. Для использования во внутренних целях (а весовой штриховой код это именно внутреннее использование) была выделены цифра 2 в начале кода. Если код начинается с 2 значит он используется уникальным для магазина способом. Допустим наши этикетки печатаются так, что первые два символа 22, затем идёт код товара и его вес в граммах и всё это печатается кодом EAN-13. И вот у нас появился второй шаблон ввода:

Всё, что считано со сканера и начинается с 22, содержит тринадцать символов есть весовой штриховой код .

Настроим новый шаблон. Источник данных оставим как и в предыдущем шаблоне, а вот с блоками поступим иначе. Теперь мы в группе "Формирование шаблона" добавим блок с фиксированным содержимым, для этого в соответствующее поле впишем 22 и добавим блок. В уже знакомый блок с произвольным содержимым напишем в качестве минимальной и максимальной длины 11. Таким образом мы сообщили системе, что нас устраивает любой код, первые два символа которого 22, и оставшиеся 11 символом - любые.

Каждый в отдельности шаблон сопоставится корректно, но вот вместе возникает противоречие. Ведь любой весовой штрихкод без ошибок сопоставится с нашим первым "всеядным" шаблоном. То есть у нас есть общее правило и есть исключение. Исключение важнее, поэтому должно обрабатываться в первую очередь. Для управления порядком сопоставления для каждого шаблона существует поле "Порядок обработки". Чем меньше значение, тем раньше шаблон будет сопоставлен.

Итог

  • Для сопоставления используются источники события - клавиатура, сканер и считыватель магнитных карт в любой комбинации;
  • Шаблон формируется из кусочков фиксированного текста и произвольного текста, размер которого можно ограничить;
  • Порядком сопоставления можно управлять.

События

Сопоставив считанные данные с нужным шаблоном уже можно говорить, что мы знаем что делать дальше. Для этого существует параметр "Событие", который позволяет настроить регистрацию в системе товара, платёжного средства, скидки и так далее.

В общем случае недостаточно сказать, что мы хотим зарегистрировать товар, ещё нужно как-то сообщить товар с каким кодом. Для этого существует секция настроек "Содержание". Задача этой секции в том, чтобы извлечь необходимую информацию из считанных данных. Шаблон ввода позволяет извлекать свои данные с помощью специальных меток.

Например, для первого шаблона из предыдущего примера достаточно сказать, что весь считанный код код мы будем трактовать как штриховой код товара. Выберем в настройках поле "артикул" и в качестве значения укажем $0.

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

И разобъём последний блок на четыре части - код товара (5 символов), килограммы (2), граммы (3) и контрольный разряд (1). 5 + 2 + 3 + 1 = 11.

Теперь мы настраивая поле артикул в качестве значения укажем $1, то есть не весь код целиком, а только пять символов, после префикса. Выберем поле "количество" и в качестве его значения укажем $3.$4. То есть возьмём килограммы, поставим точку и добавим граммы, таким образом мы превратим часть кода с весом в привычную числовую форму.

Применим к нашему шаблону код 2207150013502, по нашей схеме код будет расщеплён на 22 07150 01 350 2. В качестве артикула будет использовано 07150, в качестве количества 01.350.

Перечень событий

Обязательные поля выделены.

товар

  • артикул - штриховой или внутренний код товара;
  • количество - можно использовать количество, например для весового штрихового кода;
  • код EAN13 - возможность проверить, что указанное значение соответствует кодировке EAN13.

платёжное средство

  • 2-й трек магнитой карты - трек магнитной карты;
  • средство оплаты - средство оплаты, которое будет активировано прочитанной картой. Считанный номер использоваться для авторизации карты.

скидка

  • скидка - скидка которая будет активирована. Можно использовать только те скидки, которые активируются кассиром, а не автоматически;
  • номер карты - если скидка работает с картами, но можно сразу извлечь номер карты;
  • начальное значение даты - возможность указать или извлечь начальную дату действия. Дата ожидается в формате YYYY.MM.DD HH:MM:SS, разделители могут быть произвольными;
  • конечное значение даты - ограничение действия, формат даты как и в предыдущем поле.

дисконтная карта

  • номер карты - номер дисконтной карты заведённой в Маркетинг→Дисконтные карты.

клиент

  • номер карты - номер карты клиента заведённой в Маркетинг→Клиенты.

заказ

  • артикул - идентификатор заказа. Заказ формируется либо на ТСД либо конвертером "Стандартный импорт 4".

услуга

  • услуга - услуга заведённая в Администрирование→Оплата услуг;
  • код EAN13 - поле используется так же, как в событии товар;
  • 2-й трек магнитой карты - используется в НеттоПроцессинг .

подарочный сертификат

  • номер карты - номер сертификата для продажи.

продавец

  • код продавца

авторизация кассира

  • код кассира
  • пароль кассира

Итог

  • Шаблон может использоваться для автоматического выполнения некоторых операций. Считали код - зарегистрировали товар, прокатали магнитную карту - оплатили чек;
  • Из считанных данных можно извлекать и классифицировать информацию.

Примеры

Товар

Допустим, в магазине необходимо настроить Систему таким образом, чтобы на кассе с помощью сканера считывались товары с кодировками EAN-8 и EAN-13, а так же весовой товар. При необходимости, нужна возможность ввода кода товаров с клавиатуры.

Примечание:

Коды EAN-8 и EAN-13 содержат только цифры и никаких букв или других символов.

EAN-13

В группе "Источники данных" отмечаем флагами значения "Клавиатура" и "Считыватель штриховых кодов".

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

EAN-8

Примечание:

Использование штрих-кодов EAN-13 хотя и удобно, но не всегда возможно. Если товар имеет малые размеры, то для кода EAN-13 может не найтись достаточно места на этикетке. Уменьшение размера кода приводит к уменьшению ширины штрихов. Если штрихи будут слишком узкими, разрешающей способности сканера может оказаться недостаточно для уверенного считывания этого штрих-кода. Для маркировки небольших товаров разработан стандарт штрих-кода EAN-8, в теле сообщения которого кодируется только 8 цифр вместо 13.

Шаблон для автоматизированного процесса приемки товаров для торговых объектов

После указания наименования шаблона необходимо сформировать структуру. Группа «Структура» далее «+ Добавить элемент» :

При создании структуры необходимо внести в интерфейс следующие значения:

  • «Произвольное содержимое указанной длины»;
  • «От …» - внести единицу «1»;
  • «До …» - оставить пустое значение.

После определения структуры, администратор определяет источник данных для ввода значений.

При описании источника данных необходимо выбрать следующие параметры:

  • «Клавиатура»;
  • «Считыватель МК» - не используется;
  • «Сканер»;
  • «Приоритет» -100
  • «Событие» - товар.

В разделе «Поля» необходимо ввести фиксированное значение «$1» :

После сохранения шаблона ввода необходимо произвести привязку данного шаблона к действующим объектам:

В разделе «Шаблон используют магазины» по кнопке «Изменить» открывается список объектов. Администратор должен выбрать те объекты, для которых данных шаблон будет использоваться, и установить на данных объектах соответствующий флаг. После чего шаблон сохраняется и принимается в работу.

Весовой товар

Внимание!

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

Настроим приём весовых штриховых кодов исходя из того, что этикетки на вашем предприятии снабжают такие коды префиксом 22.

артикул - $2

Если в базе данных весовые товары заведены вместе в префиксом 22, то поле артикул должно иметь вид $1$2.

количество - $3.$4

где $3 - количество кг, $4 - количество г.

Если сканер настроен так, что контрольный разряд не передаётся, то последний блок $5 нужно удалить.

Платёжное средство

Настроим приём стандартных международных пластиковых карт.

средство оплаты - необходимо выбрать соответствующее платёжное средство, которым будет зарегистрирован платёж.

2-й трек магнитой карты - $0

Авторизация кассира

Внимание!

Если авторизация кассиров использовалась до версии позволяющей настроить шаблоны авторизации кассиров, то при обновлении, чтобы использовать данный функционал необходимо настроить шаблоны авторизации для кассиров. Авторизация картой работает только в режимах выбора кассира из списка или вводом идентификатора

Для карты указываются поля "код кассира" и "пароль кассира" .

Возможны следующие ситуации:

1. Указан "код кассира" и "пароль кассира": Пользователь находится по коду, потому проверяется соответствие пароля.

2. Указан "код кассира": Пользователь находится по коду, проверки пароля нет.

3. Указан "пароль кассира": Пользователь находится по паролю.

Переход между полями с помощью табуляции

При достаточно большом количестве полей формы, которые необходимо заполнить, переходить между ними с помощью курсора мыши становится неудобно. При этом требуется навести курсор на соответствующее поле, нажать кнопку мыши, и только после этого вводить нужное значение. Как альтернатива, используется клавиша Tab, которая позволяет быстро переключать фокус с одного поля на другое. Атрибут tabindex определяет последовательность перехода между полями при нажатии на Tab.

Блокирование элементов форм

У любого элемента формы есть два состояния, которые ограничивают доступ к элементу или ввод данных, - блокирование (disabled) и только для чтения (readonly)

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

Подсказывающий текст

В дизайне часто требуется вставить пояснение к текстовому полю, но не всегда для этого имеется место. Решением в таком случае является добавление подсказывающего текста непосредственно внутрь поля, при получении фокуса исходный текст должен пропадать. Это делается с помощью атрибута placeholder, значением которого служит любой текст. Подсказка делается для полей , , , , , и