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

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

Реактивные свойства и привязка данных

Riot.js использует реактивные свойства (this.xxx) внутри компонентов, что позволяет связывать данные формы с состоянием компонента. Пример простой привязки текстового поля:

<text-input>
  <input type="text" value={name} onin put={update}/>
  
  <script>
    export default {
      name: '',

      update(e) {
        this.name = e.target.value;
      }
    }
  </script>
</text-input>

Здесь value={name} обеспечивает двустороннюю привязку: изменения в поле мгновенно отражаются в состоянии name.

Простая проверка на пустое значение

Для базовой валидации можно использовать методы компонента, которые проверяют текущее состояние полей:

validate() {
  if (!this.name.trim()) {
    this.error = 'Поле обязательно для заполнения';
    return false;
  }
  this.error = '';
  return true;
}

И в шаблоне можно отображать сообщение об ошибке:

<p if={error} class="error">{error}</p>

Ключевой момент — реактивность: при изменении this.error интерфейс автоматически обновляется.

Валидация при событии формы

Для комплексных форм лучше обрабатывать событие submit и проверять несколько полей одновременно:

<form onsub mit={handleSubmit}>
  <input type="text" value={username} onin put={e => this.username = e.target.value} />
  <input type="password" value={password} onin put={e => this.password = e.target.value} />
  <button type="submit">Войти</button>
</form>

<script>
export default {
  username: '',
  password: '',
  errors: {},

  handleSubmit(e) {
    e.preventDefault();
    this.errors = {};

    if (!this.username.trim()) this.errors.username = 'Введите имя пользователя';
    if (!this.password.trim()) this.errors.password = 'Введите пароль';

    if (Object.keys(this.errors).length === 0) {
      this.login();
    }
  },

  login() {
    console.log('Отправка данных:', { username: this.username, password: this.password });
  }
}
</script>

Шаблон можно расширить для отображения ошибок под каждым полем:

<p if={errors.username} class="error">{errors.username}</p>
<p if={errors.password} class="error">{errors.password}</p>

Валидация с регулярными выражениями

Для проверки формата данных, например email, удобно использовать регулярные выражения:

validateEmail(email) {
  const pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return pattern.test(email);
}

handleSubmit(e) {
  e.preventDefault();
  this.errors = {};

  if (!this.validateEmail(this.email)) {
    this.errors.email = 'Неверный формат email';
  }

  if (Object.keys(this.errors).length === 0) {
    this.register();
  }
}

Регулярные выражения позволяют гибко проверять сложные форматы без дублирования кода.

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

Riot.js поддерживает реактивные методы, которые могут запускаться при изменении данных. Для мгновенной обратной связи можно использовать oninput:

onInputEmail(e) {
  this.email = e.target.value;
  if (!this.validateEmail(this.email)) {
    this.emailError = 'Неверный email';
  } else {
    this.emailError = '';
  }
}

И в шаблоне:

<input type="email" value={email} onin put={onInputEmail}/>
<p if={emailError} class="error">{emailError}</p>

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

Встроенные библиотеки валидации

Для крупных проектов можно подключать внешние библиотеки вроде validator.js и использовать их методы внутри компонентов Riot.js:

import validator from 'validator';

validateForm() {
  if (!validator.isEmail(this.email)) this.errors.email = 'Неверный email';
  if (!validator.isLength(this.password, { min: 6 })) this.errors.password = 'Пароль слишком короткий';
}

Использование готовых библиотек повышает надежность и сокращает количество ручного кода.

Реактивные сообщения и визуальная обратная связь

Riot.js позволяет изменять класс элементов динамически для визуальной индикации ошибок:

<input type="text" class={errors.username ? 'invalid' : ''} value={username} onin put={e => this.username = e.target.value}/>

Это облегчает построение интуитивно понятного интерфейса с подсветкой некорректных полей.

Итоговый подход

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

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

Оглавление