Использование Yup и Formik для реализации проверки ограничения количества встроенных символов в формах React

Реализация встроенной проверки в форме React с использованием Formik, Yup и TypeScript

Решение 1. Форма внешнего интерфейса React с проверкой ограничения на количество символов

import React from 'react';
import { Field, Formik, Form, ErrorMessage } from 'formik';
import * as Yup from 'yup';
import TextField from '@material-ui/core/TextField';
// Define the validation schema with Yup, setting max length
const descriptionValidation = Yup.string()
  .max(250, 'Description cannot exceed 250 characters')
  .optional();
// Function component
const DescriptionForm = () => {
  return (
    <Formik
      initialValues={{ description: '' }}
      validationSchema={Yup.object({ description: descriptionValidation })}
      onSubmit={(values) => console.log('Submitted', values)}
    >
      {({ errors, touched, setFieldValue, setFieldTouched }) => (
        <Form>
          <Field
            as={TextField}
            name="description"
            label="Description"
            multiline
            rows={4}
            placeholder="Optional"
            error={Boolean(errors.description && touched.description)}
            helperText={
              errors.description && touched.description
                ? errors.description
                : 'Limit: 250 characters'
            }
            onChange={(event) => {
              const { value } = event.target;
              setFieldValue('description', value);
              if (value.length > 250) {
                setFieldTouched('description', true);
              }
            }}
          />
          <ErrorMessage name="description" component="div" className="error" />
        </Form>
      )}
    </Formik>
  );
};
export default DescriptionForm;

Альтернативная встроенная проверка без свойства maxLength

Решение 2. Реагируйте с ручной проверкой длины символов без блокировки ввода

import React from 'react';
import { Field, Formik, Form, ErrorMessage } from 'formik';
import * as Yup from 'yup';
import TextField from '@material-ui/core/TextField';
// Yup schema for 250-character limit
const descriptionValidation = Yup.string()
  .max(250, 'Description cannot exceed 250 characters')
  .optional();
// Component definition
const DescriptionForm = () => {
  return (
    <Formik
      initialValues={{ description: '' }}
      validationSchema={Yup.object({ description: descriptionValidation })}
      onSubmit={(values) => console.log('Form Submitted:', values)}
    >
      {({ errors, touched, setFieldValue, setFieldTouched, values }) => (
        <Form>
          <TextField
            name="description"
            label="Description"
            multiline
            rows={4}
            placeholder="Optional"
            value={values.description}
            error={Boolean(errors.description && touched.description)}
            helperText={
              errors.description && touched.description
                ? errors.description
                : `Characters left: ${250 - values.description.length}`
            }
            onChange={(event) => {
              const { value } = event.target;
              if (value.length <= 250) {
                setFieldValue('description', value);
              } else {
                setFieldTouched('description', true);
              }
            }}
          />
          <ErrorMessage name="description" component="div" className="error" />
        </Form>
      )}
    </Formik>
  );
};
export default DescriptionForm;

Внутренняя проверка с использованием Express.js и Yup для ограничения количества символов

Решение 3. Проверка серверной части с использованием Node.js с Express и Yup

const express = require('express');
const app = express();
const Yup = require('yup');
// Middleware for JSON parsing
app.use(express.json());
// Define Yup schema
const descriptionSchema = Yup.object().shape({
  description: Yup.string()
    .max(250, 'Description cannot exceed 250 characters')
    .optional(),
});
// POST route with validation
app.post('/submit', async (req, res) => {
  try {
    await descriptionSchema.validate(req.body);
    res.status(200).json({ message: 'Validation Passed' });
  } catch (error) {
    res.status(400).json({ error: error.message });
  }
});
// Server setup
app.listen(3000, () => console.log('Server running on port 3000'));

Часто задаваемые вопросы о встроенной проверке в Formik и Yup

1. Какова основная цель использования Formik с Да для проверки?
2. Комбинация Formik и Yup упрощает обработку и проверку форм в приложениях React, особенно для более крупных форм или форм со сложными потребностями проверки. Formik управляет состоянием формы, а Yup — схемами проверки.
3. Как setFieldTouched отличаться от setFieldValue в Формике?
4. setFieldTouched обновляет статус поля «тронутый», отмечая его как взаимодействовавший в целях проверки, в то время как setFieldValue напрямую обновляет значение поля. Вместе они помогают управлять тем, когда и как происходит проверка.
5. Могу ли я использовать оба родных maxLength и да, проверка?
6. Использование maxLength ограничивает длину входных данных во внешнем интерфейсе, но может помешать запуску проверки Yup для встроенных ошибок. Если требуется встроенная проверка, рассмотрите возможность удаления maxLength и вместо этого положитесь на Yup с обработчиком onChange Formik.
7. Зачем мне использовать FieldArray с валидацией в Формике?
8. FieldArray позволяет разработчикам обрабатывать динамические формы, в которых несколько полей следуют одинаковым правилам проверки, что делает его идеальным для списков элементов, таких как комментарии или теги, где каждая запись имеет определенные требования.
9. Что такое функция устранения дребезга и зачем использовать ее с проверкой Formik?
10. Устранение дребезга — это метод, который откладывает проверку до тех пор, пока пользователь не прекратит ввод текста, что сокращает количество избыточных вызовов проверки. Это особенно полезно для более длинных текстовых полей, предотвращая преждевременные сообщения проверки, которые могут отвлекать пользователей.
11. Каковы лучшие практики проверки нескольких полей с помощью Yup?
12. Используйте Ага object и array схемы для определения сложной проверки и применения пользовательских сообщений об ошибках, чтобы было ясно, какие поля не соответствуют требованиям.
13. Как я могу динамически отображать оставшиеся символы пользователю?
14. С использованием helperText Компонент TextField в Material-UI позволяет отображать количество символов в реальном времени, что может повысить удобство использования, помогая пользователям отслеживать оставшуюся емкость ввода.
15. Может ли внутренняя проверка заменить проверку внешнего интерфейса на «Ага»?
16. Внутренняя проверка имеет решающее значение для целостности данных, но внешняя проверка обеспечивает немедленную обратную связь с пользователями, улучшая их работу. Оба варианта рекомендуются для безопасной и удобной обработки данных.
17. В чем преимущество удаления maxLength атрибут для встроенной проверки?
18. Удаление maxLength дает Formik и Yup полный контроль над процессом проверки, позволяя отображать встроенные ошибки, как только будет превышен предел символов, без прямого ограничения длины ввода.

Заключительные мысли о встроенной проверке в реальном времени

Реализация встроенной проверки с помощью Formik и Yup обеспечивает более плавный и интерактивный пользовательский интерфейс для полей с ограниченным количеством символов. Удалив максимальная длина и используя Formik SetFieldTouched стратегически пользователи могут получать мгновенную обратную связь, не отвлекаясь на жесткие ограничения. Этот метод идеально подходит для таких сценариев, как формы заявок или биополя.

Этот подход обеспечивает гибкость и может быть дополнительно адаптирован в соответствии с конкретными потребностями. Встроенная проверка ограничений на количество символов обеспечивает согласованность данных и удобство использования, особенно при управлении несколькими полями, состоящими из символов. Объединив Formik, Yup и JavaScript, разработчики могут предложить пользователям как интуитивно понятную, так и надежную проверку. 🚀