Yup un Formik izmantošana, lai ieviestu iekļauto rakstzīmju ierobežojumu validāciju reakcijas veidlapās

Iekļautās validācijas ieviešana reakcijas formā, izmantojot Formik, Yup un TypeScript

1. risinājums: reaģējiet uz priekšgala veidlapu, izmantojot apstiprinājumu rakstzīmju ierobežojumam

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īva iekļauta validācija bez rekvizīta maxLength

2. risinājums: reaģējiet ar manuālu rakstzīmju garuma validāciju, nebloķējot ievadi

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;

Aizmugursistēmas validācija, izmantojot Express.js un Yup rakstzīmju ierobežojumam

3. risinājums: aizmugursistēmas validācija, izmantojot Node.js ar Express un 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'));

Bieži uzdotie jautājumi par iekļauto validāciju pakalpojumā Formik un Yup

1. Kāds ir galvenais lietošanas mērķis Formik ar Yup apstiprināšanai?
2. Formik un Yup kombinācija vienkāršo veidlapu apstrādi un validāciju React lietojumprogrammās, īpaši lielākām formām vai formām ar sarežģītām validācijas vajadzībām. Formik pārvalda veidlapas stāvokli, bet Yup apstrādā validācijas shēmas.
3. Kā dara setFieldTouched atšķiras no setFieldValue in Formik?
4. setFieldTouched atjaunina lauka statusu “pieskarties”, atzīmējot to kā mijiedarbotu validācijas nolūkos, kamēr setFieldValue tieši atjaunina lauka vērtību. Kopā tie palīdz pārvaldīt, kad un kā notiek validācija.
5. Vai es varu izmantot gan native maxLength un jā apstiprinājums?
6. Izmantojot maxLength, tiek ierobežots ievades garums priekšpusē, taču tas var novērst Yup validācijas aktivizēšanu iekļautu kļūdu gadījumā. Ja ir nepieciešama iekļauta validācija, apsveriet iespēju noņemt maxLength un tā vietā paļauties uz Yup, izmantojot Formik's onChange apdarinātāju.
7. Kāpēc es izmantotu FieldArray ar validāciju Formikā?
8. FieldArray ļauj izstrādātājiem apstrādāt dinamiskas veidlapas, kurās vairāki lauki atbilst līdzīgiem validācijas noteikumiem, padarot to ideāli piemērotu tādu vienumu sarakstiem kā komentāri vai tagi, kur katram ierakstam ir noteiktas īpašas prasības.
9. Kas ir debounce funkcija, un kāpēc to izmantot ar Formik validāciju?
10. Atkāpšanās ir paņēmiens, kas aizkavē validāciju, līdz lietotājs ir apturējis rakstīšanu, tādējādi samazinot pārmērīgus validācijas zvanus. Tas ir īpaši noderīgi garākiem teksta laukiem, novēršot priekšlaicīgu validācijas ziņojumu saņemšanu, kas var novērst lietotāju uzmanību.
11. Kāda ir paraugprakse vairāku lauku apstiprināšanai, izmantojot Yup?
12. Izmantojiet Yup's object un array shēmas, lai definētu sarežģītu validāciju, un lietotu pielāgotus kļūdu ziņojumus, lai būtu skaidrs, kuri lauki neatbilst prasībām.
13. Kā es varu dinamiski parādīt lietotājam atlikušās rakstzīmes?
14. Izmantojot helperText Material-UI TextField komponents nodrošina reāllaika rakstzīmju skaita attēlošanu, kas var uzlabot lietojamību, palīdzot lietotājiem izsekot atlikušajai ievades jaudai.
15. Vai aizmugursistēmas validācija var aizstāt priekšgala validāciju ar Yup?
16. Aizmugursistēmas validācija ir ļoti svarīga datu integritātei, taču priekšgala validācija sniedz tūlītēju atgriezenisko saiti lietotājiem, uzlabojot viņu pieredzi. Abi ir ieteicami, lai dati tiktu apstrādāti droši un lietotājam draudzīgi.
17. Kāda ir priekšrocība, noņemot maxLength atribūts iekļautajai validācijai?
18. Noņemšana maxLength nodrošina Formik un Yup pilnīgu kontroli pār validācijas procesu, ļaujot parādīt iekļautās kļūdas, tiklīdz tiek pārsniegts rakstzīmju ierobežojums, tieši neierobežojot ievades garumu.

Pēdējās domas par tiešsaistes validāciju reāllaikā

Iekļautās validācijas ieviešana ar Formik un Yup nodrošina vienmērīgāku, interaktīvāku lietotāja pieredzi laukiem ar ierobežotu rakstzīmju skaitu. Noņemot maxLength un izmantojot Formik's setFieldTouched stratēģiski lietotāji var saņemt tūlītēju atgriezenisko saiti bez stingriem ierobežojumiem. Šī metode ir ideāli piemērota tādiem scenārijiem kā pieteikuma veidlapas vai biolauki.

Šī pieeja piedāvā elastību, un to var tālāk pielāgot, lai atbilstu konkrētām vajadzībām. Rakstzīmju ierobežojumu iekļautā validācija nodrošina datu konsekvenci un lietotājam draudzīgu pieredzi, jo īpaši, pārvaldot vairākus uz rakstzīmēm balstītus laukus. Apvienojot Formik, Yup un JavaScript, izstrādātāji var piedāvāt gan intuitīvu, gan stabilu validāciju lietotājiem. 🚀