В этом блоге мы рассмотрим создание компонента React, который использует собственный API проверки ограничений браузера.

Вы можете спросить, зачем создавать такой компонент?

  • API ограничений - это собственный способ проверки элементов формы, обеспечивающий чистый интерфейс и синтаксис.
  • Написание проверок - сложное приключение. Всегда лучше иметь при себе хороший меч.
  • Потому что это весело.

Что такое API ограничений?

API ограничений предоставляется платформой браузера для проверки элементов ввода. Обычно мы выполняем такие проверки для событий размытия или изменения. Когда возникают такие события, мы можем прочитать объект с именем validity на цели события и использовать его для выполнения проверок.

Объект достоверности содержит различные поля, соответствующие типу ошибки проверки.

Пример объекта действительности

{
  valueMissing: false,
  typeMismatch: true,
  patternMismatch: false,
  tooLong: false,
  tooShort: false,
  rangeUnderflow: false,
  rangeOverflow: false,
  stepMismatch: false,
  badInput: false,
  customError: false,
  valid: false
}

Например, поле typeMismatchfield будет установлено в true, если пользователь ввел неверный адрес электронной почты в поле ввода типа электронной почты. Мы также можем использовать эти поля в нашем компоненте React.

Дизайн компонентов

const InputWithValidator = ({
  id,
  inputProps,
  labelText,
  checks,
  errorMessage
}) => {
  const [isValid, setIsValid] = useState(true);

  const checkValidity = ev => {
    const { validity } = ev.target;
    const checksPassed = checks.filter(check => validity[check]).length === 0;
    setIsValid(checksPassed);
  };

  return (
    <Fragment>
      <label htmlFor={id}>
        {labelText}
      </label>
      <input id={id} {...inputProps} onBlur={checkValidity} />
      <p className={`${isValid ? `dn` : `dib red`}`}>{errorMessage}</p>
    </Fragment>
  );
};
.dn {
 display: none
}
.dib {
  display: inline-block
}
.red {color: red}

Для компонента React у нас есть метка, тег ввода и тег абзаца для сообщения об ошибке, которые будут видны только в том случае, если ввод недопустим. Мы подключаемся к обработчику событий onBlur входного тега и выполняем проверки. Мы передаем необходимые проверки как опору входному тегу. У нас также есть несколько базовых классов для стилизации. Компонент также принимает настраиваемые сообщения.

Основная функциональность - это метод checkValidity, который срабатывает при размытии. Эта функция считывает объект достоверности и сопоставляет его с пройденными проверками. Если все проверки пройдены, то для каждого поля в объекте достоверности будет установлено значение false. Следовательно, функция фильтра вернет пустой массив. И наоборот, даже если одна проверка не удалась, функция фильтра вернет непустой массив.

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

Давайте построим проверку электронной почты. Здесь мы передаем typeMismatch в качестве требуемой проверки.

Точно так же мы можем создать тег ввода для числа, у которого есть минимальный и максимальный предел. Когда пользователь вводит число, превышающее максимальный предел, мы можем показать сообщение об ошибке, указав rangeOverflowvalidation. Мы можем использовать rangeUnderflowvalidation, чтобы проверить, не ниже ли число минимального лимита.

Вот пример тега ввода, который является обязательным, и мы можем показать сообщение об ошибке, когда пользователь покидает поле ввода.

Итак, готово: более чистый подход к валидации. Тем не менее, это только беглое представление о том, что предлагает API ограничений. Чтобы получить полную информацию, перейдите по ссылке ниже на MDN и приступайте к созданию потрясающих вещей.

Ссылки:

Https://developer.mozilla.org/en-US/docs/Web/API/Constraint_validation