Валидация пользовательского ввода

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

Встроенные элементы формы

Polymer предоставляет набор стандартных элементов для работы с формами: <paper-input>, <iron-input>, <paper-textarea> и другие. Большинство из них поддерживают встроенные атрибуты для валидации:

  • required — поле обязательно для заполнения.
  • pattern — регулярное выражение для проверки формата значения.
  • min и max — ограничения числовых полей.
  • maxlength и minlength — ограничения длины текста.

Пример:

<paper-input label="Email" type="email" required error-message="Введите корректный email"></paper-input>

В данном примере поле обязательно для заполнения, а компонент автоматически проверяет, соответствует ли значение формату email. Атрибут error-message задает текст ошибки, который будет отображаться при несоответствии.

Использование iron-form для комплексной проверки

Для управления несколькими полями и проверки всей формы целиком используется <iron-form>. Этот элемент агрегирует данные всех дочерних компонентов <iron-input> или <paper-input> и позволяет валидировать их перед отправкой.

Пример:

<iron-form id="userForm">
  <form>
    <paper-input label="Имя" name="name" required></paper-input>
    <paper-input label="Возраст" name="age" type="number" min="1" max="120"></paper-input>
    <paper-button raised on-click="submitForm">Отправить</paper-button>
  </form>
</iron-form>

Jav * aScript:

submitForm() {
  const form = this.$.userForm;
  if (form.validate()) {
    form.submit();
  } else {
    console.log('Форма содержит ошибки');
  }
}

Метод validate() возвращает true только если все поля прошли проверку.

Кастомная валидация

Polymer позволяет добавлять собственные правила валидации через computed properties и observer’ы. Например, можно проверять соответствие значения сложным критериям, которые невозможно задать через атрибуты.

Пример:

static get properties() {
  return {
    password: {
      type: String,
      observer: '_validatePassword'
    },
    passwordError: {
      type: String,
      value: ''
    }
  };
}

_validatePassword(newVal) {
  if (newVal.length < 8) {
    this.passwordError = 'Пароль должен содержать не менее 8 символов';
  } else if (!/[A-Z]/.test(newVal)) {
    this.passwordError = 'Пароль должен содержать хотя бы одну заглавную букву';
  } else {
    this.passwordError = '';
  }
}

В шаблоне:

<paper-input label="Пароль" value="{{password}}" error-message="{{passwordError}}"></paper-input>

Такой подход позволяет создавать гибкую и расширяемую систему валидации для любых полей формы.

Асинхронная валидация

Иногда требуется проверка значения на сервере (например, уникальность логина). Polymer поддерживает асинхронную валидацию с помощью promise и обновления состояния ошибок после получения ответа.

Пример:

_validateUsername(username) {
  fetch(`/api/check-username?username=${username}`)
    .then(res => res.json())
    .then(data => {
      this.usernameError = data.available ? '' : 'Имя пользователя занято';
    });
}

В шаблоне:

<paper-input label="Имя пользователя" value="{{username}}" error-message="{{usernameError}}" on-input="_validateUsername"></paper-input>

Валидация с использованием регулярных выражений

Для простых текстовых полей часто достаточно pattern. Он поддерживает любые регулярные выражения и интегрируется с элементами формы.

Пример:

<paper-input label="Телефон" pattern="^\+\d{1,3}\s\d{3}\s\d{3}-\d{2}-\d{2}$" error-message="Введите телефон в формате +7 123 456-78-90"></paper-input>

Глобальная стратегия валидации

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

  • HTML-атрибуты (required, pattern, min, max) — для базовой проверки.
  • Observer’ы и computed properties — для сложной логики на клиенте.
  • Асинхронная проверка через сервер — для уникальных и динамически изменяемых данных.
  • iron-form.validate() — для проверки всей формы перед отправкой.

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

Оглавление