Uporaba Yup in Formik za implementacijo preverjanja omejitve znakov v vrstici v obrazcih React

Implementacija vgrajene validacije v obrazcu React z uporabo Formik, Yup in TypeScript

Rešitev 1: Reagirajte na sprednji obrazec s preverjanjem Jup na omejitev 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;

Alternativno preverjanje v vrstici brez lastnosti maxLength

2. rešitev: reagirajte z ročnim preverjanjem dolžine znakov brez blokiranja vnosa

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;

Preverjanje zaledja z uporabo Express.js in ja za omejitev znakov

Rešitev 3: Preverjanje zaledja z uporabo Node.js z Express in Ja

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

Pogosta vprašanja o vgrajenem preverjanju v Formik in Yup

1. Kaj je glavni namen uporabe Formik z ja za potrditev?
2. Kombinacija Formik in Yup poenostavlja rokovanje z obrazci in preverjanje v aplikacijah React, zlasti za večje obrazce ali obrazce s kompleksnimi potrebami preverjanja. Formik upravlja stanje obrazca, Yup pa sheme preverjanja veljavnosti.
3. Kako setFieldTouched razlikujejo od setFieldValue v Formiku?
4. setFieldTouched posodobi stanje »dotaknjenega« polja in ga označi kot interakcijo z namenom preverjanja, medtem ko setFieldValue neposredno posodobi vrednost polja. Skupaj pomagata upravljati, kdaj in kako poteka validacija.
5. Ali lahko uporabim oba domača maxLength in ja validacija?
6. Uporaba maxLength omejuje dolžino vnosa na sprednji strani, vendar lahko prepreči, da bi Yupovo preverjanje sprožilo napake v vrstici. Če je zahtevano preverjanje v vrstici, razmislite o odstranitvi maxLength in se namesto tega zanašajte na Yup s Formikovim obdelovalcem onChange.
7. Zakaj bi uporabljal FieldArray z validacijo v Formiku?
8. FieldArray omogoča razvijalcem, da obravnavajo dinamične obrazce, kjer več polj sledi podobnim pravilom preverjanja, zaradi česar je idealen za sezname elementov, kot so komentarji ali oznake, kjer ima vsak vnos posebne zahteve.
9. Kaj je funkcija odboja in zakaj jo uporabljati s preverjanjem Formik?
10. Debouncing je tehnika, ki odloži preverjanje, dokler uporabnik ne ustavi tipkanja, kar zmanjša pretirane potrditvene klice. Še posebej je uporabno za daljša besedilna polja, saj preprečuje prezgodnja potrditvena sporočila, ki bi lahko zmotila uporabnike.
11. Katere so najboljše prakse za preverjanje več polj z Yup?
12. Uporabite Yup's object in array sheme za definiranje zapletenega preverjanja veljavnosti in uporabo sporočil o napakah po meri, da bo jasno, katera polja ne izpolnjujejo zahtev.
13. Kako lahko uporabniku dinamično prikažem preostale znake?
14. Uporaba helperText v komponenti TextField uporabniškega vmesnika Material-UI omogoča prikaz števila znakov v realnem času, kar lahko izboljša uporabnost tako, da uporabnikom pomaga spremljati njihovo preostalo vnosno zmogljivost.
15. Ali lahko validacija v ozadju zamenja validacijo v sprednjem delu z ja?
16. Zaledno preverjanje je ključnega pomena za celovitost podatkov, vendar preverjanje sprednjega dela zagotavlja uporabnikom takojšnje povratne informacije, kar izboljša njihovo izkušnjo. Oba sta priporočljiva za varno in uporabniku prijazno obdelavo podatkov.
17. Kakšna je prednost odstranitve maxLength atribut za preverjanje v vrstici?
18. Odstranjevanje maxLength daje Formiku in Yupu popoln nadzor nad postopkom preverjanja, kar omogoča prikaz napak v vrstici takoj, ko je presežena omejitev znakov, brez neposrednega omejevanja dolžine vnosa.

Končne misli o vgrajeni validaciji v realnem času

Implementacija vgrajenega preverjanja veljavnosti s Formik in Yup zagotavlja bolj gladko in bolj interaktivno uporabniško izkušnjo za polja, omejena z znaki. Z odstranitvijo maxLength in z uporabo Formikove setFieldTouched strateško lahko uporabniki dobijo takojšnje povratne informacije, ne da bi jih motile stroge omejitve. Ta tehnika je idealna za scenarije, kot so prijavni obrazci ali biološka polja.

Ta pristop ponuja prilagodljivost in ga je mogoče dodatno prilagoditi posebnim potrebam. Vgrajeno preverjanje za omejitve znakov zagotavlja doslednost podatkov in uporabniku prijazno izkušnjo, zlasti pri upravljanju več polj, ki temeljijo na znakih. S kombiniranjem Formik, Yup in JavaScript lahko razvijalci uporabnikom ponudijo intuitivno in robustno preverjanje veljavnosti. 🚀