Встроенная валидация

В библиотеке SweetAlert встроена система валидации, позволяющая интегрировать проверку данных непосредственно в диалоговые окна, созданные с её помощью. Это значительно упрощает процесс создания форм, так как позволяет не только запрашивать информацию у пользователя, но и проверять её на соответствие определённым условиям.

Основные механизмы валидации

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

Валидация через параметр inputValidator

Одним из самых распространённых способов валидации является использование параметра inputValidator. Он позволяет задать функцию, которая будет проверять введённые пользователем данные. Если данные не проходят проверку, отображается сообщение об ошибке.

Пример базовой реализации:

Swal.fire({
  title: 'Введите ваше имя',
  input: 'text',
  inputValidator: (value) => {
    if (!value) {
      return 'Имя не может быть пустым!';
    }
  }
});

В этом примере, если пользователь не введёт значение, будет выведено сообщение «Имя не может быть пустым!». Параметр inputValidator принимает функцию, которая принимает один аргумент — введённое значение. Если это значение не соответствует нужным условиям, функция должна вернуть строку с сообщением об ошибке. Если же валидация проходит успешно, функция возвращает undefined, и диалоговое окно продолжает своё выполнение.

Валидация с несколькими условиями

Параметр inputValidator можно использовать для проверки нескольких условий. Например, для ввода пароля можно одновременно проверять наличие определённой длины и специальных символов:

Swal.fire({
  title: 'Введите пароль',
  input: 'password',
  inputValidator: (value) => {
    if (!value) {
      return 'Пароль не может быть пустым!';
    }
    if (value.length < 8) {
      return 'Пароль должен быть не менее 8 символов!';
    }
    if (!/[!@#$%^&*(),.?":{}|<>]/.test(value)) {
      return 'Пароль должен содержать хотя бы один специальный символ!';
    }
  }
});

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

Валидация через input с типом select

Для проверки данных можно использовать и поля типа select, что полезно при запросах выбора из списка. В этом случае также можно применить inputValidator для проверки, был ли выбран хотя бы один элемент.

Пример:

Swal.fire({
  title: 'Выберите страну',
  input: 'select',
  inputOptions: {
    'US': 'США',
    'RU': 'Россия',
    'DE': 'Германия'
  },
  inputValidator: (value) => {
    if (!value) {
      return 'Выберите страну!';
    }
  }
});

Здесь в качестве поля ввода используется выпадающий список. Функция валидации проверяет, был ли сделан выбор. Если пользователь не выбрал страну, будет выведено сообщение «Выберите страну!».

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

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

Swal.fire({
  title: 'Введите ваш email',
  input: 'email',
  inputValidator: (value) => {
    const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
    if (!emailRegex.test(value)) {
      return 'Введите корректный email!';
    }
  }
});

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

Применение кастомных сообщений об ошибках

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

Пример:

Swal.fire({
  title: 'Введите номер телефона',
  input: 'text',
  inputValidator: (value) => {
    if (!value) {
      return 'Номер телефона не может быть пустым!';
    }
    if (!/^\+?\d{10,15}$/.test(value)) {
      return 'Введите корректный номер телефона!';
    }
  }
});

Здесь проверяется, что номер телефона состоит только из цифр и может содержать символ «+» в начале. Также устанавливается ограничение на длину номера — от 10 до 15 символов.

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

В некоторых случаях валидация требует асинхронных операций, например, проверки уникальности данных через API. В таком случае можно использовать асинхронную валидацию с async/await. Для этого параметр inputValidator может возвращать промис, который будет разрешён после завершения асинхронной операции.

Пример асинхронной проверки:

Swal.fire({
  title: 'Введите ваше имя пользователя',
  input: 'text',
  inputValidator: async (value) => {
    if (!value) {
      return 'Имя пользователя не может быть пустым!';
    }
    const response = await fetch(`/check-username?username=${value}`);
    const data = await response.json();
    if (data.exists) {
      return 'Это имя пользователя уже занято!';
    }
  }
});

Здесь выполняется запрос к серверу для проверки, существует ли уже имя пользователя в базе данных. Если имя пользователя уже занято, возвращается сообщение об ошибке.

Валидация форм с несколькими полями

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

Пример:

Swal.fire({
  title: 'Регистрация',
  html: `
    <input id="username" class="swal2-input" placeholder="Имя пользователя">
    <input id="email" type="email" class="swal2-input" placeholder="Email">
  `,
  preConfirm: () => {
    const username = document.getElementById('username').value;
    const email = document.getElementById('email').value;
    
    if (!username || !email) {
      return 'Заполните все поля!';
    }
    if (!/\S+@\S+\.\S+/.test(email)) {
      return 'Введите корректный email!';
    }
  }
});

В данном примере валидация выполняется на два поля: имя пользователя и email. Если одно из полей не заполнено или email не имеет правильный формат, выводится сообщение об ошибке.

Заключение

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

Оглавление