Backbone.Validation

Backbone.js предоставляет минималистичный каркас для построения структурированных веб-приложений. Для обеспечения корректности данных и их соответствия определённым правилам часто применяется расширение Backbone.Validation, которое интегрируется с моделями и представлениями, добавляя мощные возможности для валидации.

Основы Backbone.Validation

Backbone.Validation — это плагин, расширяющий функциональность моделей Backbone. Он позволяет:

  • Определять правила валидации на уровне модели.
  • Автоматически проверять данные при изменении атрибутов.
  • Взаимодействовать с представлениями для отображения ошибок пользователю.

Для подключения Backbone.Validation необходимо подключить скрипт плагина после загрузки Backbone.js и Underscore.js:

<script src="underscore.js"></script>
<script src="backbone.js"></script>
<script src="backbone-validation.js"></script>

После подключения можно расширять модели Backbone валидацией с помощью метода extend.

Определение правил валидации

Правила валидации задаются в объекте validation, определяемом в модели:

var User = Backbone.Model.extend({
    validation: {
        name: {
            required: true,
            msg: 'Имя обязательно для заполнения'
        },
        email: [
            {
                required: true,
                msg: 'Email обязателен'
            },
            {
                pattern: 'email',
                msg: 'Некорректный формат email'
            }
        ],
        age: {
            min: 18,
            max: 100,
            msg: 'Возраст должен быть от 18 до 100 лет'
        }
    }
});

Ключевые моменты:

  • required — обязательное поле.
  • pattern — шаблон проверки (например, стандартная проверка email).
  • min и max — ограничения для числовых значений.
  • msg — сообщение, которое возвращается при ошибке.

Правила могут быть заданы как объект или массив объектов для одного атрибута, что позволяет комбинировать несколько проверок.

Проверка данных

Для проверки данных используются методы isValid и validate.

Пример:

var user = new User();
user.set({name: '', email: 'test@example.com', age: 17});

if (!user.isValid(true)) {
    console.log(user.validationError);
}
  • Метод isValid(true) запускает валидацию для всех атрибутов и сохраняет ошибки в validationError.
  • Метод validate может быть переопределён для кастомной логики, но Backbone.Validation упрощает работу, предоставляя декларативный способ определения правил.

Интеграция с представлениями

Backbone.Validation позволяет легко синхронизировать ошибки с интерфейсом. Для этого используется метод bind:

var userView = Backbone.View.extend({
    initialize: function() {
        Backbone.Validation.bind(this);
    },
    render: function() {
        this.$el.html('<input name="name"><span class="error"></span>');
        return this;
    }
});

Основные возможности интеграции:

  • Автоматическое отображение сообщений об ошибках рядом с полями формы.
  • Обновление состояния полей при исправлении ошибок.
  • Возможность кастомизации вывода ошибок через опции valid и invalid:
Backbone.Validation.bind(this, {
    valid: function(view, attr) {
        view.$('[name=' + attr + ']').removeClass('error').next('.error').text('');
    },
    invalid: function(view, attr, error) {
        view.$('[name=' + attr + ']').addClass('error').next('.error').text(error);
    }
});

Кастомные валидаторы

Backbone.Validation поддерживает создание собственных валидаторов через метод add:

Backbone.Validation.validators.customAge = function(value, attr, customValue, model) {
    if (value < customValue) {
        return 'Возраст должен быть не меньше ' + customValue;
    }
};

Использование кастомного валидатора:

var User = Backbone.Model.extend({
    validation: {
        age: {
            customAge: 21
        }
    }
});

Настройка глобального поведения

Backbone.Validation предоставляет возможность глобально управлять поведением валидации:

  • forceUpdate — позволяет обновлять атрибуты даже при ошибках.
  • selector — задаёт CSS-селектор для полей формы, где будут отображаться ошибки.
  • model — указывает модель, для которой привязана валидация в контексте представления.

Преимущества использования Backbone.Validation

  • Централизованная валидация моделей.
  • Декларативный и легко читаемый синтаксис правил.
  • Полная интеграция с представлениями для UX.
  • Поддержка кастомных и комбинированных правил.
  • Минимизация дублирования кода проверки на уровне контроллеров или форм.

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

Оглавление