Ús de Yup i Formik per implementar la validació del límit de caràcters en línia als formularis React

Implementació de la validació en línia en un formulari React mitjançant Formik, Sí i TypeScript

Solució 1: reaccioneu el formulari de front-end amb la validació de Sí al límit de caràcters

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;

Validació en línia alternativa sense la propietat maxLength

Solució 2: reaccioneu amb la validació manual de la longitud dels caràcters sense bloquejar l'entrada

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;

Validació del backend mitjançant Express.js i Sí per al límit de caràcters

Solució 3: validació del backend mitjançant Node.js amb Express i Sí

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'));

Preguntes freqüents sobre la validació en línia a Formik i sí

1. Quin és l'objectiu principal de l'ús Formik amb Sí per a la validació?
2. La combinació de Formik i Yup simplifica el maneig i la validació de formularis a les aplicacions React, especialment per a formularis més grans o amb necessitats de validació complexes. Formik gestiona l'estat del formulari, mentre que Yup gestiona els esquemes de validació.
3. Com ho fa setFieldTouched difereixen de setFieldValue a Formik?
4. setFieldTouched actualitza l'estat "tocat" d'un camp, marcant-lo com a interaccionat amb finalitats de validació, mentre setFieldValue actualitza directament el valor del camp. Junts, ajuden a gestionar quan i com es produeix la validació.
5. Puc utilitzar els dos nadius maxLength i sí validació?
6. L'ús de maxLength limita la longitud d'entrada a la part frontal, però pot evitar que la validació de Yup s'activi per errors en línia. Si cal la validació en línia, considereu eliminar maxLength i confiar en Yup amb el controlador onChange de Formik.
7. Per què utilitzaria FieldArray amb validació en Formik?
8. FieldArray permet als desenvolupadors gestionar formularis dinàmics on diversos camps segueixen regles de validació similars, el que el fa ideal per a llistes d'elements com comentaris o etiquetes on cada entrada té requisits específics.
9. Què és una funció de rebot i per què utilitzar-la amb la validació Formik?
10. El rebot és una tècnica que retarda la validació fins que l'usuari ha aturat l'escriptura, reduint les trucades de validació excessives. És especialment útil per a camps de text més llargs, evitant missatges de validació prematurs que poden distreure els usuaris.
11. Quines són les pràctiques recomanades per validar diversos camps amb Yup?
12. Utilitza Yup's object i array esquemes per definir una validació complexa i aplicar missatges d'error personalitzats per deixar clar quins camps no compleixen els requisits.
13. Com puc mostrar els caràcters restants a l'usuari de manera dinàmica?
14. Utilitzant helperText El component TextField de Material-UI permet la visualització del recompte de caràcters en temps real, cosa que pot millorar la usabilitat ajudant els usuaris a fer un seguiment de la seva capacitat d'entrada restant.
15. La validació del backend pot substituir la validació del frontend amb Sí?
16. La validació de backend és crucial per a la integritat de les dades, però la validació de frontend proporciona comentaris immediats als usuaris, millorant la seva experiència. Es recomana que tots dos gestionen les dades de manera segura i fàcil d'utilitzar.
17. Quin és l'avantatge d'eliminar el maxLength atribut per a la validació en línia?
18. Eliminant maxLength proporciona a Formik i Yup un control total sobre el procés de validació, permetent que els errors en línia es mostrin tan bon punt se superi el límit de caràcters, sense restringir la longitud d'entrada directament.

Consideracions finals sobre la validació en línia en temps real

La implementació de la validació en línia amb Formik i Yup proporciona una experiència d'usuari més fluida i interactiva per a camps amb caràcters limitats. En eliminar Longitud màxima i utilitzant Formik's setFieldTouched estratègicament, els usuaris poden obtenir comentaris instantanis sense ser interromputs per límits estrictes. Aquesta tècnica és ideal per a escenaris com formularis de sol·licitud o camps bio.

Aquest enfocament ofereix flexibilitat i es pot personalitzar encara més per adaptar-se a necessitats específiques. La validació en línia dels límits de caràcters garanteix la coherència de les dades i una experiència fàcil d'utilitzar, especialment quan es gestionen diversos camps basats en caràcters. En combinar Formik, Yup i JavaScript, els desenvolupadors poden oferir una validació tant intuïtiva com robusta per als usuaris. 🚀