Použití Yup a Formik k implementaci ověření limitu počtu znaků ve formulářích React

Implementace inline validace ve formuláři React pomocí Formik, Yup a TypeScript

Řešení 1: Reagujte na formulář frontend s ověřením Ano na limit počtu znaků

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;

Alternativní vložené ověření bez vlastnosti maxLength

Řešení 2: Reagujte s ručním ověřením délky znaků bez blokování vstupu

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;

Ověření backendu pomocí Express.js a Yup pro omezení počtu znaků

Řešení 3: Ověření backendu pomocí Node.js s Express a 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'));

Často kladené otázky o inline validaci ve Formiku a Yup

1. Jaký je hlavní účel použití Formik s Ano na ověření?
2. Kombinace Formik a Yup zjednodušuje manipulaci s formuláři a ověřování v aplikacích React, zejména u větších formulářů nebo formulářů se složitými potřebami ověřování. Formik spravuje stav formuláře, zatímco Yup zpracovává schémata ověřování.
3. Jak to dělá setFieldTouched lišit se od setFieldValue ve Formiku?
4. setFieldTouched aktualizuje „dotčený“ stav pole a označí jej jako interagované pro účely ověření setFieldValue přímo aktualizuje hodnotu pole. Společně pomáhají řídit, kdy a jak probíhá ověřování.
5. Mohu použít oba nativní maxLength a ano ověření?
6. Použití maxLength omezuje délku vstupu na frontendu, ale může zabránit tomu, aby se Yupovo ověření spustilo kvůli chybám v řádku. Pokud je vyžadována inline validace, zvažte odebrání maxLength a místo toho se spolehnout na Yup s obslužnou rutinou onChange společnosti Formik.
7. Proč bych používal FieldArray s validací ve Formiku?
8. FieldArray umožňuje vývojářům pracovat s dynamickými formuláři, kde se více polí řídí podobnými ověřovacími pravidly, takže je ideální pro seznamy položek, jako jsou komentáře nebo značky, kde má každá položka specifické požadavky.
9. Co je funkce debounce a proč ji používat s ověřením Formik?
10. Debouncing je technika, která zdržuje ověření, dokud uživatel nepozastaví psaní, čímž se omezí nadměrné ověřovací volání. Je to užitečné zejména pro delší textová pole, protože zabraňuje předčasným zprávám o ověření, které mohou rozptylovat uživatele.
11. Jaké jsou osvědčené postupy pro ověřování více polí pomocí Yup?
12. Použijte Yup's object a array schémata k definování komplexního ověřování a použití vlastních chybových zpráv, aby bylo jasné, která pole nesplňují požadavky.
13. Jak mohu zobrazit zbývající znaky uživateli dynamicky?
14. Použití helperText Komponenta TextField v Material-UI umožňuje zobrazení počtu znaků v reálném čase, což může zlepšit použitelnost tím, že uživatelům pomáhá sledovat jejich zbývající vstupní kapacitu.
15. Může backendová validace nahradit frontendovou validaci pomocí Yup?
16. Backendová validace je zásadní pro integritu dat, ale frontendová validace poskytuje uživatelům okamžitou zpětnou vazbu a zlepšuje jejich zkušenosti. Oba se doporučují pro bezpečné a uživatelsky přívětivé zacházení s daty.
17. Jaká je výhoda odstranění maxLength atribut pro inline ověření?
18. Odebírání maxLength dává Formikovi a Yupovi plnou kontrolu nad procesem validace, což umožňuje zobrazení inline chyb, jakmile je překročen limit počtu znaků, bez přímého omezení délky vstupu.

Závěrečné myšlenky na inline ověřování v reálném čase

Implementace inline ověřování pomocí Formik a Yup poskytuje hladší a interaktivnější uživatelský zážitek pro pole s omezeným počtem znaků. Odebráním maxLength a pomocí Formiku setFieldTouched strategicky mohou uživatelé získat okamžitou zpětnou vazbu, aniž by je rušily tvrdé limity. Tato technika je ideální pro scénáře, jako jsou aplikační formuláře nebo bio pole.

Tento přístup nabízí flexibilitu a lze jej dále přizpůsobit konkrétním potřebám. Inline ověřování limitů znaků zajišťuje konzistenci dat a uživatelsky přívětivé prostředí, zejména při správě více znakových polí. Díky kombinaci Formik, Yup a JavaScript mohou vývojáři nabídnout uživatelům intuitivní a robustní ověřování. 🚀