Available only in PRO Edition

Форматированные поля ввода

Функциональность доступна для пользователей Webix PRO.

Для текстового поля ввода вы можете применить маску форматирования. Маска задается объектом с двумя свойствами:

mask - строка, которая состоит из знаков "#" для вводимых символов (может быть ограничена параметром allow) и специальных символов, таких как дефисы, точки, пробелы, и т.п.
allow - набор символов, которые разрешено вводить в поле несмотря на их положение.

{ 
    view:"text", 
    name:"phone", 
    label:"Phone", 
    pattern:{ mask:"###-## ########", allow:/[0-9]/g}
}

Если маска задана строкой, свойство allow примет значение по умолчанию (/[A-Za-z0-9]/g).

{ view:"text", name:"phone", label:"Phone", pattern:"###-## ########"}

Готовые маски

Библиотека предлагает три готовые маски для форматирования текста, описанные в коллекции webix.patterns:

phone - определяет формат для ввода телефонного номера;
card- определяет формат для ввода номера платежной карты;
date - определяет формат для ввода даты.

Предопределенные маски хранятся в формате "свойство-значение", где свойство - это название правила, а значение - это объект со свойствами mask и allow.

webix.patterns = {
    phone:{ mask:"+# (###) ###-####", allow:/[0-9]/g },
    card: { mask:"#### #### #### ####", allow:/[0-9]/g },
    date: { mask:"####-##-## ##:##", allow:/[0-9]/g }
};

Вы можете переопределить существующую маску или создать новую, используя класс webix.patterns:

// переопределение маски "phone"
webix.patterns.phone = {
    mask:"#### ### #####", allow:/[0-9]/g 
};
 
// создание новой маски "custom"
webix.patterns.custom = {
    mask:"## ## - ### #####", allow:/[0-9]/g 
};
 
// или
webix.patterns.custom = "## ## - ### #####";

Получение введенных значений

Существует два способа получить значение инпута в зависимости от его типа:

используя getValue для обычных инпутов

$$("text1").getValue(); // возвращает "1234567"

используя метод getText(), чтобы получить значение из поля ввода, содержащего маску форматирования в его элементе HTML:

$$("text1").getText(); // возвращает "12-345 67"

Related sample: Formatted Text Inputs

Валидация отформатированных полей ввода

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

Однако вы можете задать другое правило валидации, используя свойство validate и применить его вместо сгенерированного.

Вы также можете указать сообщение валидации для текстового поля, используя свойство invalidMessage. Текст сообщения можно локализовать.

Например, вы можете указать правило валидации номера Master Card:

var form = webix.ui({
    view:"form", 
    elements:[
      { view:"text", name:"phone",label:"Phone number", pattern:webix.patterns.phone},
      { view:"text", name:"card", label:"Credit card", pattern:webix.patterns.card, 
          validate:function(value){
            return /^5[1-5][0-9]{14}$/.test(value);
      }, invalidMessage:"Invalid card number"}
    ]  
});
 
form.validate();
 
form.elements.phone.validate();
form.elements.card.validate();

Поля с маской "phone" валидируются по сгенерированному правилу.

Поля с маской "card" валидируются по правилу, заданному функцией в свойстве validate.

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

Задание числового формата

Вы можете задать формат для вводимых числовых значений с помощью свойства format.

Наверх