Menggunakan Yup dan Formik untuk Melaksanakan Pengesahan Had Aksara Sebaris dalam Borang React

Melaksanakan Pengesahan Sebaris dalam Borang Reaksi Menggunakan Formik, Yup dan TypeScript

Penyelesaian 1: Borang React Frontend dengan Pengesahan Yup pada Had Aksara

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;

Pengesahan Sebaris Alternatif Tanpa Harta MaxLength

Penyelesaian 2: Bertindak balas dengan Pengesahan Panjang Aksara Manual Tanpa Input Menyekat

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;

Pengesahan Bahagian Belakang Menggunakan Express.js dan Yup untuk Had Aksara

Penyelesaian 3: Pengesahan Bahagian Belakang Menggunakan Node.js dengan Express dan 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'));

Soalan Lazim Mengenai Pengesahan Sebaris dalam Formik dan Yup

1. Apakah tujuan utama penggunaan Formik dengan Yup untuk pengesahan?
2. Gabungan Formik dan Yup memudahkan pengendalian dan pengesahan borang dalam aplikasi React, terutamanya untuk borang atau borang yang lebih besar dengan keperluan pengesahan yang kompleks. Formik menguruskan keadaan borang, manakala Yup mengendalikan skema pengesahan.
3. Bagaimana setFieldTouched berbeza daripada setFieldValue dalam Formik?
4. setFieldTouched mengemas kini status "disentuh" ​​sesuatu medan, menandakannya sebagai berinteraksi dengan untuk tujuan pengesahan, manakala setFieldValue mengemas kini secara langsung nilai medan. Bersama-sama, mereka membantu mengurus masa dan cara pengesahan berlaku.
5. Bolehkah saya menggunakan kedua-duanya asli maxLength dan pengesahan Yup?
6. Menggunakan maxLength mengehadkan panjang input pada bahagian hadapan tetapi boleh menghalang pengesahan Yup daripada mencetuskan ralat sebaris. Jika pengesahan sebaris diperlukan, pertimbangkan untuk mengalih keluar maxLength dan bergantung pada Yup dengan pengendali onChange Formik.
7. Mengapa saya akan menggunakan FieldArray dengan pengesahan dalam Formik?
8. FieldArray membenarkan pembangun mengendalikan borang dinamik yang mana berbilang medan mengikut peraturan pengesahan yang serupa, menjadikannya sesuai untuk senarai item seperti ulasan atau teg yang setiap entri mempunyai keperluan khusus.
9. Apakah fungsi nyahlantun, dan mengapa menggunakannya dengan pengesahan Formik?
10. Nyahlantun ialah teknik yang menangguhkan pengesahan sehingga pengguna menjeda menaip, mengurangkan panggilan pengesahan yang berlebihan. Ia amat membantu untuk medan teks yang lebih panjang, menghalang mesej pengesahan pramatang yang mungkin mengganggu pengguna.
11. Apakah amalan terbaik untuk mengesahkan berbilang medan dengan Yup?
12. Gunakan Yup object dan array skema untuk menentukan pengesahan kompleks dan menggunakan mesej ralat tersuai untuk menjelaskan medan yang tidak memenuhi keperluan.
13. Bagaimanakah saya boleh memaparkan baki aksara kepada pengguna secara dinamik?
14. menggunakan helperText dalam komponen TextField Material-UI membenarkan paparan kiraan aksara masa nyata, yang boleh meningkatkan kebolehgunaan dengan membantu pengguna menjejaki baki kapasiti input mereka.
15. Bolehkah pengesahan hujung belakang menggantikan pengesahan hujung hadapan dengan Yup?
16. Pengesahan bahagian belakang adalah penting untuk integriti data, tetapi pengesahan bahagian hadapan memberikan maklum balas segera kepada pengguna, meningkatkan pengalaman mereka. Kedua-duanya disyorkan untuk mengendalikan data dengan selamat dan mesra pengguna.
17. Apakah kelebihan mengalih keluar maxLength atribut untuk pengesahan sebaris?
18. Mengalih keluar maxLength memberikan Formik dan Yup kawalan penuh ke atas proses pengesahan, membenarkan ralat sebaris dipaparkan sebaik sahaja melebihi had aksara, tanpa mengehadkan panjang input secara langsung.

Pemikiran Akhir tentang Pengesahan Sebaris Masa Nyata

Melaksanakan pengesahan sebaris dengan Formik dan Yup menyediakan pengalaman pengguna yang lebih lancar dan interaktif untuk medan terhad aksara. Dengan mengeluarkan maxLength dan menggunakan Formik's setFieldTouched secara strategik, pengguna boleh mendapatkan maklum balas segera tanpa diganggu oleh had yang sukar. Teknik ini sesuai untuk senario seperti borang permohonan atau medan bio.

Pendekatan ini menawarkan fleksibiliti dan boleh disesuaikan lagi untuk memenuhi keperluan tertentu. Pengesahan sebaris untuk had aksara memastikan ketekalan data dan pengalaman yang mesra pengguna, terutamanya apabila mengurus berbilang medan berasaskan aksara. Dengan menggabungkan Formik, Yup dan JavaScript, pembangun boleh menawarkan kedua-dua pengesahan intuitif dan mantap untuk pengguna. 🚀