Używanie Yup i Formik do implementowania wbudowanej walidacji limitu znaków w formularzach React

Implementowanie walidacji wbudowanej w formularzu React przy użyciu Formik, Yup i TypeScript

Rozwiązanie 1: Zareaguj formularzem frontendowym z weryfikacją Yup w przypadku limitu znaków

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;

Alternatywna weryfikacja bezpośrednia bez właściwości maxLength

Rozwiązanie 2: Zareaguj, wprowadzając ręczną walidację długości znaków bez blokowania wprowadzania danych

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;

Weryfikacja backendu przy użyciu Express.js i Yup w przypadku limitu znaków

Rozwiązanie 3: Walidacja backendu przy użyciu Node.js z Express i 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'));

Często zadawane pytania dotyczące walidacji inline w Formik i Yup

1. Jaki jest główny cel stosowania Formik z „Tak” w celu potwierdzenia?
2. Połączenie Formik i Yup upraszcza obsługę formularzy i sprawdzanie poprawności w aplikacjach React, szczególnie w przypadku większych formularzy lub formularzy o złożonych potrzebach związanych z walidacją. Formik zarządza stanem formularza, podczas gdy Yup obsługuje schematy walidacji.
3. Jak to się dzieje setFieldTouched różnią się od setFieldValue w Formiku?
4. setFieldTouched aktualizuje status pola „dotknięty”, oznaczając je jako pole, z którym nawiązano interakcję w celu sprawdzenia poprawności, podczas gdy setFieldValue bezpośrednio aktualizuje wartość pola. Razem pomagają zarządzać czasem i sposobem walidacji.
5. Czy mogę używać obu natywnych maxLength i tak, potwierdzenie?
6. Użycie maxLength ogranicza długość danych wejściowych na interfejsie, ale może uniemożliwić uruchomienie sprawdzania poprawności Yup w przypadku błędów wbudowanych. Jeśli wymagana jest weryfikacja inline, rozważ usunięcie maxLength i zamiast tego polegaj na Yup z procedurą obsługi onChange firmy Formik.
7. Dlaczego miałbym używać FieldArray z walidacją w Formiku?
8. FieldArray umożliwia programistom obsługę dynamicznych formularzy, w których wiele pól podlega podobnym zasadom sprawdzania poprawności, co czyni go idealnym rozwiązaniem w przypadku list elementów, takich jak komentarze lub tagi, w których każdy wpis ma określone wymagania.
9. Co to jest funkcja odbicia i dlaczego warto jej używać z walidacją Formik?
10. Odbijanie to technika opóźniająca sprawdzanie poprawności do czasu, aż użytkownik przerwie pisanie, co pozwala ograniczyć nadmierne wywołania sprawdzające. Jest to szczególnie przydatne w przypadku dłuższych pól tekstowych, zapobiegając przedwczesnym komunikatom weryfikacyjnym, które mogą rozpraszać użytkowników.
11. Jakie są najlepsze praktyki sprawdzania poprawności wielu pól za pomocą Yup?
12. Użyj Tak object I array schematy do definiowania złożonej walidacji i stosowania niestandardowych komunikatów o błędach, aby było jasne, które pola nie spełniają wymagań.
13. Jak mogę dynamicznie wyświetlać użytkownikowi pozostałe znaki?
14. Używanie helperText w komponencie TextField Material-UI umożliwia wyświetlanie liczby znaków w czasie rzeczywistym, co może poprawić użyteczność, pomagając użytkownikom śledzić pozostałą pojemność wejściową.
15. Czy weryfikacja backendu może zastąpić weryfikację frontendu przez „Tak”?
16. Weryfikacja backendu ma kluczowe znaczenie dla integralności danych, ale walidacja frontendu zapewnia użytkownikom natychmiastową informację zwrotną, poprawiając ich doświadczenie. Obydwa są zalecane w celu bezpiecznego i przyjaznego dla użytkownika przetwarzania danych.
17. Jaka jest zaleta usunięcia maxLength atrybut do sprawdzania poprawności inline?
18. Usuwanie maxLength daje firmom Formik i Yup pełną kontrolę nad procesem sprawdzania poprawności, umożliwiając wyświetlanie błędów wbudowanych natychmiast po przekroczeniu limitu znaków, bez bezpośredniego ograniczania długości danych wejściowych.

Końcowe przemyślenia na temat sprawdzania poprawności inline w czasie rzeczywistym

Wdrożenie walidacji wbudowanej za pomocą Formik i Yup zapewnia płynniejszą i bardziej interaktywną obsługę użytkownika w przypadku pól o ograniczonej liczbie znaków. Usuwając maksymalna długość i używając Formika setFieldTouched strategicznie użytkownicy mogą uzyskać natychmiastową informację zwrotną, bez przeszkadzania im sztywnymi limitami. Technika ta jest idealna w przypadku scenariuszy takich jak formularze zgłoszeniowe lub pola biograficzne.

Takie podejście zapewnia elastyczność i można je dalej dostosowywać do konkretnych potrzeb. Wbudowana weryfikacja limitów znaków zapewnia spójność danych i przyjazną dla użytkownika obsługę, szczególnie w przypadku zarządzania wieloma polami znakowymi. Łącząc Formik, Yup i JavaScript, programiści mogą zaoferować użytkownikom zarówno intuicyjną, jak i solidną weryfikację. 🚀