Как при помощи библиотеки yup в JavaScript (react) сделать кастомную валидацию? Например, поле инпута может включать буквы и некоторые спец. Символы

Для создания кастомной валидации с использованием библиотеки yup нужно использовать метод addMethod.

Пример:

import * as yup from "yup";

// Создаем схему валидации
const schema = yup.object().shape({
  username: yup.string().myCustomValidator(),
});

// Добавляем кастомный валидатор
yup.addMethod(yup.string, "myCustomValidator", function (message) {
  return this.test("my-custom-validator", message, function (value) {
    // Здесь мы можем реализовать любую логику валидатора
    if (!value) {
      return false;
    }
    const regex = /^[a-zA-Z0-9!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]*$/;
    return regex.test(value);
  });
});

// Используем схему для валидации объекта
schema.validate({ username: "test1234$" }).catch(function (err) {
  console.error(err.errors);
});

В данном примере мы добавляем новый метод myCustomValidator для типа данных string, который проверяет, что строка содержит только буквы и некоторые специальные символы. Для этого используется функция test, которая принимает имя теста (my-custom-validator), сообщение об ошибке и функцию-валидатор.

Функция-валидатор возвращает true, если значение проходит валидацию, и false, если не проходит. В данном примере мы проверяем, что значение совпадает с регулярным выражением, которое определяет допустимые символы.

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