Použitie Yup a Formik na implementáciu overenia obmedzenia počtu znakov vo formulároch React

Implementácia priamej validácie vo formulári React pomocou Formik, Yup a TypeScript

Riešenie 1: Reagujte na formulár frontend s overením Áno na limite znakov

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;

Alternatívne priame overenie bez vlastnosti maxLength

Riešenie 2: Reagujte s manuálnym overením dĺžky znakov bez blokovania 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;

Overenie backendu pomocou Express.js a Yup pre obmedzenie počtu znakov

Riešenie 3: Overenie backendu pomocou 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 overovaní v riadku vo Formiku a Yup

1. Aký je hlavný účel použitia Formik s Áno na overenie?
2. Kombinácia Formik a Yup zjednodušuje manipuláciu s formulármi a validáciu v aplikáciách React, najmä pre väčšie formuláre alebo formuláre s komplexnými požiadavkami na validáciu. Formik spravuje stav formulára, zatiaľ čo Yup sa stará o overovacie schémy.
3. Ako to robí setFieldTouched líšiť sa od setFieldValue vo Formiku?
4. setFieldTouched aktualizuje stav „dotknutého“ poľa a označí ho ako interagujúce na účely overenia setFieldValue priamo aktualizuje hodnotu poľa. Spoločne pomáhajú riadiť, kedy a ako prebieha validácia.
5. Môžem použiť oboje natívne maxLength a áno potvrdenie?
6. Použitie maxLength obmedzuje vstupnú dĺžku na prednom konci, ale môže zabrániť spusteniu overenia Yup pre vložené chyby. Ak sa vyžaduje inline overenie, zvážte odstránenie maxLength a namiesto toho sa spoľahnite na Yup s obslužným programom onChange spoločnosti Formik.
7. Prečo by som používal FieldArray s validáciou vo Formiku?
8. FieldArray umožňuje vývojárom pracovať s dynamickými formulármi, v ktorých sa viaceré polia riadia podobnými pravidlami overovania, vďaka čomu je ideálny pre zoznamy položiek, ako sú komentáre alebo značky, kde má každá položka špecifické požiadavky.
9. Čo je funkcia debounce a prečo ju používať s overením Formik?
10. Debouncing je technika, ktorá oneskoruje overenie, kým používateľ nepozastaví písanie, čím sa znižuje nadmerné overovanie. Je to užitočné najmä pri dlhších textových poliach, čím sa zabráni predčasným overovacím správam, ktoré môžu rozptyľovať používateľov.
11. Aké sú osvedčené postupy na overenie viacerých polí pomocou Yup?
12. Použite Yup's object a array schémy na definovanie komplexnej validácie a aplikovanie vlastných chybových hlásení, aby bolo jasné, ktoré polia nespĺňajú požiadavky.
13. Ako môžem dynamicky zobraziť zostávajúce znaky používateľovi?
14. Používanie helperText komponent TextField v Material-UI umožňuje zobrazenie počtu znakov v reálnom čase, čo môže zlepšiť použiteľnosť tým, že používateľom pomáha sledovať ich zostávajúcu vstupnú kapacitu.
15. Môže backendová validácia nahradiť frontendovú validáciu s Yup?
16. Backendová validácia je kľúčová pre integritu údajov, ale frontendová validácia poskytuje používateľom okamžitú spätnú väzbu a zlepšuje ich skúsenosti. Obidva sa odporúčajú na bezpečné a užívateľsky prívetivé zaobchádzanie s údajmi.
17. Aká je výhoda odstránenia maxLength atribút pre inline overenie?
18. Odstraňuje sa maxLength dáva Formikovi a Yupovi plnú kontrolu nad procesom overovania, čo umožňuje zobrazenie chýb v riadku hneď po prekročení limitu počtu znakov bez priameho obmedzenia dĺžky vstupu.

Záverečné myšlienky o overení v reálnom čase

Implementácia inline overovania pomocou Formik a Yup poskytuje plynulejšie a interaktívnejšie používateľské prostredie pre polia s obmedzeným počtom znakov. Odstránením maxLength a pomocou Formika setFieldTouched strategicky môžu používatelia získať okamžitú spätnú väzbu bez toho, aby ich rušili prísne obmedzenia. Táto technika je ideálna pre scenáre, ako sú aplikačné formuláre alebo bio polia.

Tento prístup ponúka flexibilitu a môže byť ďalej prispôsobený špecifickým potrebám. Inline overenie limitov znakov zaisťuje konzistentnosť údajov a užívateľsky príjemný zážitok, najmä pri správe viacerých polí založených na znakoch. Kombináciou Formik, Yup a JavaScript môžu vývojári ponúknuť používateľom intuitívne a robustné overenie. 🚀