Валидация полей ввода

В Carbon Components Svelte встроена мощная система работы с формами, которая позволяет создавать интерактивные элементы ввода с валидацией данных. Основной принцип заключается в сочетании компонентов TextInput, NumberInput, PasswordInput и других с встроенными механизмами проверки корректности значений.

Настройка TextInput с валидацией

Компонент TextInput поддерживает различные состояния: invalid, warn и helperText. Эти состояния позволяют визуально информировать пользователя о корректности введённых данных.

<script>
  import { TextInput } from 'carbon-components-svelte';
  let value = '';
  let isInvalid = false;
  let invalidText = 'Поле обязательно для заполнения';
  
  function validate() {
    isInvalid = value.trim() === '';
  }
</script>

<TextInput
  bind:value
  id="text-input"
  labelText="Имя пользователя"
  placeholder="Введите имя"
  {invalidText}
  invalid={isInvalid}
  on:blur={validate}
/>

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

  • invalid — булево значение, указывающее состояние ошибки.
  • invalidText — текст подсказки при некорректном вводе.
  • on:blur — событие, используемое для проверки значения при потере фокуса.

Валидация числовых полей с NumberInput

Для числовых значений удобно использовать NumberInput, который поддерживает ограничения диапазона и шаг изменения значения.

<script>
  import { NumberInput } from 'carbon-components-svelte';
  let quantity = 0;
  let isInvalid = false;
  let invalidText = 'Значение должно быть от 1 до 100';
  
  function validate() {
    isInvalid = quantity < 1 || quantity > 100;
  }
</script>

<NumberInput
  bind:value={quantity}
  id="quantity-input"
  min={1}
  max={100}
  step={1}
  label="Количество"
  invalid={isInvalid}
  {invalidText}
  on:blur={validate}
/>

Особенности:

  • min и max задают допустимый диапазон.
  • step управляет шагом изменения значения стрелками.
  • Событие on:blur и условная проверка позволяют динамически обновлять состояние invalid.

Валидация пароля с PasswordInput

Компонент PasswordInput поддерживает подсказки по безопасности пароля и визуальную индикацию ошибок.

<script>
  import { PasswordInput } from 'carbon-components-svelte';
  let password = '';
  let isInvalid = false;
  let invalidText = 'Пароль должен содержать минимум 8 символов';
  
  function validate() {
    isInvalid = password.length < 8;
  }
</script>

<PasswordInput
  bind:value={password}
  id="password-input"
  labelText="Пароль"
  {invalidText}
  invalid={isInvalid}
  on:blur={validate}
/>

Особенности:

  • Проверка длины пароля или сложного паттерна с помощью регулярных выражений.
  • Можно комбинировать с helperText для отображения требований к паролю.
  • Поддержка динамической индикации ошибок при вводе.

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

Регулярные выражения позволяют проверять формат ввода, например, адрес электронной почты:

<script>
  import { TextInput } from 'carbon-components-svelte';
  let email = '';
  let isInvalid = false;
  let invalidText = 'Некорректный формат электронной почты';
  const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

  function validate() {
    isInvalid = !emailPattern.test(email);
  }
</script>

<TextInput
  bind:value={email}
  id="email-input"
  labelText="Email"
  placeholder="user@example.com"
  {invalidText}
  invalid={isInvalid}
  on:blur={validate}
/>

Примечания:

  • Валидация выполняется через метод test() регулярного выражения.
  • В сочетании с invalid и invalidText создается визуальная обратная связь пользователю.
  • Можно расширить проверку на сложные паттерны, например, телефонные номера или даты.

Состояния предупреждения и подсказки

Компоненты Carbon поддерживают состояния предупреждения (warn) и вспомогательных сообщений (helperText).

<TextInput
  id="optional-input"
  labelText="Опциональное поле"
  placeholder="Введите данные"
  helperText="Это поле не является обязательным"
  warn={value.length > 10}
  warnText="Рекомендуется ввести не более 10 символов"
/>

Особенности:

  • warn и warnText отображают предупреждение, не блокируя отправку формы.
  • helperText помогает пользователю правильно заполнить поле.

Динамическая валидация и интеграция с формами

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

<script>
  import { TextInput, NumberInput } from 'carbon-components-svelte';
  let formData = { name: '', age: '' };
  let errors = { name: false, age: false };

  function validateForm() {
    errors.name = formData.name.trim() === '';
    errors.age = formData.age < 1 || formData.age > 120;
  }
</script>

<form on:submit|preventDefault={validateForm}>
  <TextInput
    bind:value={formData.name}
    labelText="Имя"
    invalid={errors.name}
    invalidText="Имя обязательно"
  />
  <NumberInput
    bind:value={formData.age}
    label="Возраст"
    min={1}
    max={120}
    invalid={errors.age}
    invalidText="Некорректный возраст"
  />
  <button type="submit">Отправить</button>
</form>

Примечания:

  • Использование on:submit|preventDefault позволяет полностью контролировать процесс валидации.
  • Все ошибки централизованно хранятся в объекте errors.
  • Легко масштабировать на формы с десятками полей.

Советы по организации валидации

  • Делать валидацию интерактивной: проверять данные при blur или input, чтобы не ждать отправки формы.
  • Использовать состояния invalid и warn по назначению, не смешивая их.
  • Регулярные выражения — основной инструмент для проверки формата текста.
  • Хранить ошибки централизованно, особенно при сложных формах.
  • Комбинировать helperText и invalidText для повышения удобства ввода.

Валидация в Carbon Components Svelte позволяет создавать гибкие, наглядные формы, обеспечивающие точный контроль за корректностью данных без использования сторонних библиотек. Система invalid, warn и вспомогательных сообщений обеспечивает максимальную информативность и интуитивность интерфейса.

Оглавление