Χρησιμοποιώντας το Yup και το Formik για την υλοποίηση της επικύρωσης ορίου ενσωματωμένου χαρακτήρα σε φόρμες React

Εφαρμογή ενσωματωμένης επικύρωσης σε φόρμα React χρησιμοποιώντας Formik, Yup και TypeScript

Λύση 1: React Frontend Form with Yup Validation on Character Limit

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;

Εναλλακτική ενσωματωμένη επικύρωση χωρίς την ιδιότητα maxLength

Λύση 2: Αντιδράστε με μη αυτόματη επικύρωση μήκους χαρακτήρων χωρίς αποκλεισμό εισόδου

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;

Επικύρωση Backend με χρήση Express.js και Yup για όριο χαρακτήρων

Λύση 3: Επικύρωση Backend με χρήση Node.js με Express και 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'));

Συχνές ερωτήσεις σχετικά με την ενσωματωμένη επικύρωση σε Formik και Yup

1. Ποιος είναι ο κύριος σκοπός της χρήσης Formik με το Yup για επικύρωση;
2. Ο συνδυασμός Formik και Yup απλοποιεί τον χειρισμό και την επικύρωση φόρμας σε εφαρμογές React, ειδικά για μεγαλύτερες φόρμες ή φόρμες με περίπλοκες ανάγκες επικύρωσης. Το Formik διαχειρίζεται την κατάσταση φόρμας, ενώ το Yup χειρίζεται σχήματα επικύρωσης.
3. Πώς κάνει setFieldTouched διαφωνώ setFieldValue στο Φόρμικ;
4. setFieldTouched ενημερώνει την κατάσταση "touched" ενός πεδίου, επισημαίνοντάς το ως αλληλεπίδραση για σκοπούς επικύρωσης, ενώ setFieldValue ενημερώνει άμεσα την τιμή του πεδίου. Μαζί, βοηθούν στη διαχείριση του πότε και του πώς γίνεται η επικύρωση.
5. Μπορώ να χρησιμοποιήσω και τα δύο εγγενή maxLength και ναι επικύρωση;
6. Η χρήση του maxLength περιορίζει το μήκος εισόδου στο μπροστινό μέρος, αλλά μπορεί να αποτρέψει την ενεργοποίηση της επικύρωσης του Yup για ενσωματωμένα σφάλματα. Εάν απαιτείται ενσωματωμένη επικύρωση, εξετάστε το ενδεχόμενο να αφαιρέσετε το maxLength και να βασιστείτε στο Yup με τον χειριστή onChange του Formik.
7. Γιατί να χρησιμοποιήσω FieldArray με επικύρωση στο Formik;
8. FieldArray επιτρέπει στους προγραμματιστές να χειρίζονται δυναμικές φόρμες όπου πολλά πεδία ακολουθούν παρόμοιους κανόνες επικύρωσης, καθιστώντας την ιδανική για λίστες στοιχείων όπως σχόλια ή ετικέτες όπου κάθε καταχώριση έχει συγκεκριμένες απαιτήσεις.
9. Τι είναι μια συνάρτηση αναπήδησης και γιατί να τη χρησιμοποιήσετε με την επικύρωση Formik;
10. Το Debouncing είναι μια τεχνική που καθυστερεί την επικύρωση έως ότου ο χρήστης σταματήσει την πληκτρολόγηση, μειώνοντας τις υπερβολικές κλήσεις επικύρωσης. Είναι ιδιαίτερα χρήσιμο για μεγαλύτερα πεδία κειμένου, αποτρέποντας μηνύματα πρόωρης επικύρωσης που μπορεί να αποσπάσουν την προσοχή των χρηστών.
11. Ποιες είναι οι βέλτιστες πρακτικές για την επικύρωση πολλαπλών πεδίων με το Yup;
12. Χρησιμοποιήστε το Yup's object και array σχήματα για να ορίσετε περίπλοκη επικύρωση και να εφαρμόσετε προσαρμοσμένα μηνύματα σφάλματος για να καταστήσετε σαφές ποια πεδία δεν πληρούν τις απαιτήσεις.
13. Πώς μπορώ να εμφανίσω τους υπόλοιπους χαρακτήρες στον χρήστη δυναμικά;
14. Χρησιμοποιώντας helperText στο στοιχείο TextField του Material-UI επιτρέπει την εμφάνιση πλήθους χαρακτήρων σε πραγματικό χρόνο, η οποία μπορεί να βελτιώσει τη χρηστικότητα βοηθώντας τους χρήστες να παρακολουθούν την υπολειπόμενη χωρητικότητα εισόδου τους.
15. Μπορεί η επικύρωση backend να αντικαταστήσει την επικύρωση frontend με το Yup;
16. Η επικύρωση backend είναι ζωτικής σημασίας για την ακεραιότητα των δεδομένων, αλλά η επικύρωση frontend παρέχει άμεση ανατροφοδότηση στους χρήστες, βελτιώνοντας την εμπειρία τους. Και οι δύο συνιστώνται για τον ασφαλή και φιλικό προς τον χρήστη χειρισμό δεδομένων.
17. Ποιο είναι το πλεονέκτημα της αφαίρεσης του maxLength χαρακτηριστικό για ενσωματωμένη επικύρωση;
18. Αφαίρεση maxLength δίνει στα Formik και Yup πλήρη έλεγχο της διαδικασίας επικύρωσης, επιτρέποντας την εμφάνιση ενσωματωμένων σφαλμάτων μόλις ξεπεραστεί το όριο χαρακτήρων, χωρίς να περιορίζει άμεσα το μήκος εισαγωγής.

Τελικές σκέψεις σχετικά με την ενσωματωμένη επικύρωση σε πραγματικό χρόνο

Η εφαρμογή ενσωματωμένης επικύρωσης με το Formik και το Yup παρέχει μια πιο ομαλή, πιο διαδραστική εμπειρία χρήστη για πεδία περιορισμένου χαρακτήρα. Με την αφαίρεση μέγιστο μήκος και χρησιμοποιώντας Formik's setFieldTouched στρατηγικά, οι χρήστες μπορούν να λαμβάνουν άμεση ανατροφοδότηση χωρίς να διακόπτονται από σκληρά όρια. Αυτή η τεχνική είναι ιδανική για σενάρια όπως φόρμες αίτησης ή βιο πεδία.

Αυτή η προσέγγιση προσφέρει ευελιξία και μπορεί να προσαρμοστεί περαιτέρω για να ταιριάζει σε συγκεκριμένες ανάγκες. Η ενσωματωμένη επικύρωση για όρια χαρακτήρων διασφαλίζει τη συνέπεια των δεδομένων και μια φιλική προς το χρήστη εμπειρία, ειδικά κατά τη διαχείριση πολλών πεδίων που βασίζονται σε χαρακτήρες. Συνδυάζοντας Formik, Yup και JavaScript, οι προγραμματιστές μπορούν να προσφέρουν τόσο διαισθητική όσο και ισχυρή επικύρωση για τους χρήστες. 🚀