Knockout Validation для проверки форм

Knockout Validation — это расширение для Knockout.js, предоставляющее удобный механизм валидации данных в реальном времени. Он интегрируется с привязками данных (data-bind) Knockout, позволяя создавать динамические формы с проверкой корректности ввода без лишнего кода.

Установка и подключение

Для использования Knockout Validation необходимо подключить сам Knockout.js и скрипт расширения. Обычно это делается через CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.3/knockout.validation.min.js"></script>

После подключения расширения следует включить его конфигурацию:

ko.validation.init({
    insertMessages: true,
    decorateInputElement: true,
    errorElementClass: 'error',
    errorMessageClass: 'error-message',
});
  • insertMessages: автоматическое добавление сообщений об ошибках под полем.
  • decorateInputElement: добавляет CSS-класс к некорректным полям.
  • errorElementClass: класс для стилизации неверных полей.
  • errorMessageClass: класс для стилизации текста ошибок.

Создание наблюдаемых с правилами валидации

Knockout Validation расширяет стандартные observables, позволяя прикреплять к ним правила:

var viewModel = {
    name: ko.observable().extend({ required: true }),
    email: ko.observable().extend({ 
        required: true, 
        email: true 
    }),
    age: ko.observable().extend({ 
        required: true, 
        min: 18, 
        max: 99 
    })
};

Основные правила:

  • required: поле обязательно для заполнения.
  • min и max: числовые ограничения.
  • minLength и maxLength: длина строки.
  • pattern: проверка регулярным выражением.
  • email: проверка корректности email.
  • number: проверка числа.

Каждое правило автоматически генерирует сообщение об ошибке при нарушении.

Объединение и проверка всего ViewModel

Для комплексной проверки формы используется функция ko.validatedObservable. Она объединяет несколько observables в один объект с общей проверкой:

var formModel = ko.validatedObservable({
    name: viewModel.name,
    email: viewModel.email,
    age: viewModel.age
});

if (formModel.isValid()) {
    // Данные корректны, можно отправлять на сервер
} else {
    formModel.errors.showAllMessages();
}
  • isValid() возвращает true, если все поля соответствуют правилам.
  • errors.showAllMessages() выводит все сообщения об ошибках сразу.

Пользовательские правила валидации

Knockout Validation позволяет создавать собственные правила:

ko.validation.rules['startsWithA'] = {
    validator: function (val, someOtherVal) {
        return val && val.charAt(0).toLowerCase() === 'a';
    },
    message: 'Значение должно начинаться с буквы "A"'
};

ko.validation.registerExtenders();

var viewModelCustom = {
    username: ko.observable().extend({ startsWithA: true })
};
  • validator — функция проверки.
  • message — сообщение об ошибке.
  • registerExtenders() регистрирует новые правила.

Интеграция с HTML

Knockout Validation легко связывается с формами через привязки данных:

<form data-bind="submit: save">
    <label>Имя:</label>
    <input type="text" data-bind="value: name" />
    <span data-bind="validationMessage: name"></span>

    <label>Email:</label>
    <input type="text" data-bind="value: email" />
    <span data-bind="validationMessage: email"></span>

    <label>Возраст:</label>
    <input type="number" data-bind="value: age" />
    <span data-bind="validationMessage: age"></span>

    <button type="submit">Отправить</button>
</form>

Привязка validationMessage автоматически выводит сообщения об ошибках для конкретного поля.

Обработка отправки формы

Функция отправки формы должна учитывать проверку валидности:

viewModel.save = function() {
    if (formModel.isValid()) {
        console.log("Данные формы:", ko.toJS(viewModel));
    } else {
        formModel.errors.showAllMessages();
    }
};

Использование ko.toJS преобразует observables в обычный объект для передачи на сервер.

Дополнительные возможности

  • Настройка глобальных сообщений: через ko.validation.init({ messagesOnModified: true }) можно показывать ошибки только после изменения поля.
  • Стилизация полей: CSS-классы error и error-message можно использовать для визуальной индикации.
  • Асинхронная валидация: возможно создание валидаторов, которые проверяют данные на сервере перед подтверждением формы.

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

Оглавление