Валидация полей модели
При работе с объектами модели нередко бывает важно, чтобы они соответствовали определенным требованиям или ограничениям. Проверку на соответствие модели подобным ограничениям осуществляется с помощью валидации.
Ext JS 4 позволяет применять правила валидации напрямую к полям модели. А это значит, что мы можем избежать дублирования кода, упростить и оптимизировать приложение в целом. Создадим некоторую модель и определим в ней правила валидации:
Ext.define('User', { extend: 'Ext.data.Model', fields: [{ name: 'name', type: 'string' },{ name: 'age', type: 'int' },{ name: 'phone', type: 'string' },{ name: 'gender', type: 'string' },{ name: 'username', type: 'string' }], validations: [{ type: 'presence', field: 'age' },{ type: 'length', field: 'name', min: 2 },{ type: 'inclusion', field: 'gender', list: ['М', 'Ж'] },{ type: 'exclusion', field: 'username', list: ['Admin', 'Operator'] },{ type: 'format', field: 'username', matcher: /([a-z]+)[0-9]{2,3}/ }] });
Итак, мы добавили валидаторы полей модели в виде свойства validations
. Это свойство содержит массив объектов-валидаторов.
Каждый валидатор имеет поле type
, которое указывает на тип валидатора, и поле field
, которое указывает, к какому полю
относится валидатор. Кроме того, используются дополнительные атрибуты.
Затем массив валидаторов обрабатывается и сопоставляется с методами и свойствами, содержащимися в классе-синглтоне Ext.data.validations
.
Фреймворк имеет всего шесть встроенных типов валидаторов:
length: проверяет длину поля, которая указывается в параметрах
min
иmax
, которые указывают соответственно на минимальную и максимальную длину значения поля.presence: проверяет на наличие значения у поля модели.
inclusion: проверяет значение и возвращает true, если данное значение имеется в списке - в параметре list
exclusion: проверяет значение и возвращает true, если данное значение отсутствует в списке - в параметре list
format: проверяет, соответствует ли значение поля регулярному выражению в параметре
matcher
email: проверяет, является ли действительным адрес электронной почты
Теперь проверим валидаторы в действии - создадим объект данной модели и залоггируем в консоли вывод функции validate
(указав в поле name заведомо невалидное значение - из одной буквы, хотя у нас минимальная длина должна составлять 2 символа):
var person = Ext.create('User', { name: 'E', age: 28, phone: '55555', gender: 'М', username: 'eugene22' }); console.log(person.validate());
В этом случае в консольном выводе мы увидим ошибку валидации:
....items:[{field:"name", message:"is wrong length"}],....
Это сообщение будет говорить о том, что данный объект модели невалидный, так как указанное поле имеет неправильную длину.
Хотя метод validate
позволяет нам определить ошибки при валидации, но также мы можем применить метод isValid()
,
который сигнализирует о том, пройдена ли валидация:
if(person.isValid()) { alert('Модель прошла валидацию'); } else { var errors =person.validate(); errors.each(function(error){ alert("Ошибка в определении поля " + error.field+": "+error.message); }); }
Таким образом, если валидация не пройдены, то мы можем вызвать метод validate для определения ошибок, а затем вывести информацию о каждой ошибке.
Создание собственного валидатора
Имеющиеся встроенные валидаторы покрывают большой объем случаев, но они все таки не всеобъемлющи. Иногда возникает необходимость в собственном валидаторе, заточенном под конкретные нужды. Например. в примере выше использовалось простое написание телефона. А что если телефон должен иметь определенное количество цифр, разделенных в некоторых местах дефисами. И в данном случае мы можем создать свой собственный валидатор.
Для создания нового валидатора, нам надо добавить для класса Ext.data.validations
новые свойства и методы,
которые будут выполнять функцию валидации:
Ext.data.validations.phoneMessage = 'Неправильный формат номера телефона'; Ext.data.validations.phone=function(config,value){ var valid =false; valid=value.length=== 9;// 7 цифр + 2 дефиса valid=valid&&(value.split('-').length===3); //3 части номера, разделенные 2-мя дефисами return valid; }; Ext.define('User', { extend: 'Ext.data.Model', fields: [{ name: 'name', type: 'string' },{ name: 'age', type: 'int' },{ name: 'phone', type: 'string' },{ name: 'gender', type: 'string' },{ name: 'username', type: 'string' }], validations: [{ type: 'presence', field: 'age' },{ type: 'length', field: 'name', min: 2 },{ type: 'inclusion', field: 'gender', list: ['М', 'Ж'] },{ type: 'exclusion', field: 'username', list: ['Admin', 'Operator'] },{ type: 'format', field: 'username', matcher: /([a-z]+)[0-9]{2,3}/ },{ type: 'phone', field: 'phone' }] });
В самом начали мы определили, во-первых, сообщение об ошибке - Ext.data.validations.phoneMessage
, а во-вторых,
функцию валидации. Функция валидации смотрит на формат строки и в зависимости от введенных данных возвращает true или false.
Будущий тип валидации должен будет иметь то же самое имя, что и функция валидации.
Теперь при создании и последующей валидации следующего объекта:
var person = Ext.create('User', { name: 'E', age: 28, phone: '55555', gender: 'М', username: 'eugene22' }); if(person.isValid()) { alert('Модель прошла валидацию'); } else { var errors =person.validate(); errors.each(function(error){ alert("Ошибка в определении поля " + error.field+": "+error.message); }); }