Sử dụng Yup và Formik để triển khai xác thực giới hạn ký tự nội tuyến trong biểu mẫu phản ứng

Triển khai xác thực nội tuyến trong biểu mẫu phản ứng bằng Formik, Yup và TypeScript

Giải pháp 1: Biểu mẫu giao diện người dùng phản hồi với xác thực Yup về giới hạn ký tự

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;

Xác thực nội tuyến thay thế không có thuộc tính maxLength

Giải pháp 2: Phản ứng bằng xác thực độ dài ký tự thủ công mà không chặn đầu vào

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;

Xác thực phụ trợ bằng Express.js và Yup cho giới hạn ký tự

Giải pháp 3: Xác thực phụ trợ bằng Node.js với Express và 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'));

Câu hỏi thường gặp về xác thực nội tuyến trong Formik và Yup

1. Mục đích chính của việc sử dụng là gì Formik với Yup để xác nhận?
2. Sự kết hợp giữa Formik và Yup giúp đơn giản hóa việc xử lý và xác thực biểu mẫu trong các ứng dụng React, đặc biệt đối với các biểu mẫu lớn hơn hoặc biểu mẫu có nhu cầu xác thực phức tạp. Formik quản lý trạng thái biểu mẫu, trong khi Yup xử lý các lược đồ xác thực.
3. Làm thế nào setFieldTouched khác với setFieldValue ở Formik?
4. setFieldTouched cập nhật trạng thái “đã chạm” của một trường, đánh dấu trường đó là đã tương tác nhằm mục đích xác thực, đồng thời setFieldValue trực tiếp cập nhật giá trị của trường. Cùng nhau, chúng giúp quản lý thời điểm và cách thức xác thực diễn ra.
5. Tôi có thể sử dụng cả bản địa không maxLength và xác nhận Yup?
6. Việc sử dụng maxLength giới hạn độ dài đầu vào ở giao diện người dùng nhưng có thể ngăn quá trình xác thực của Yup kích hoạt các lỗi nội tuyến. Nếu cần phải xác thực nội tuyến, hãy xem xét loại bỏ maxLength và thay vào đó dựa vào Yup bằng trình xử lý onChange của Formik.
7. Tại sao tôi lại sử dụng FieldArray với xác nhận trong Formik?
8. FieldArray cho phép nhà phát triển xử lý các biểu mẫu động trong đó nhiều trường tuân theo các quy tắc xác thực tương tự, khiến nó trở nên lý tưởng cho danh sách các mục như nhận xét hoặc thẻ trong đó mỗi mục nhập có yêu cầu cụ thể.
9. Hàm gỡ lỗi là gì và tại sao lại sử dụng nó với xác thực Formik?
10. Gỡ lỗi là một kỹ thuật làm trì hoãn việc xác thực cho đến khi người dùng tạm dừng nhập, giảm các cuộc gọi xác thực quá mức. Nó đặc biệt hữu ích cho các trường văn bản dài hơn, ngăn chặn các thông báo xác thực sớm có thể khiến người dùng mất tập trung.
11. Các phương pháp hay nhất để xác thực nhiều trường với Yup là gì?
12. Sử dụng Yup object Và array các lược đồ để xác định xác thực phức tạp và áp dụng các thông báo lỗi tùy chỉnh để làm rõ trường nào không đáp ứng yêu cầu.
13. Làm cách nào tôi có thể hiển thị động các ký tự còn lại cho người dùng?
14. sử dụng helperText trong thành phần TextField của Material-UI cho phép hiển thị số lượng ký tự theo thời gian thực, có thể cải thiện khả năng sử dụng bằng cách giúp người dùng theo dõi dung lượng đầu vào còn lại của họ.
15. Xác thực phụ trợ có thể thay thế xác thực giao diện người dùng bằng Yup không?
16. Xác thực phần cuối rất quan trọng đối với tính toàn vẹn của dữ liệu, nhưng xác thực giao diện người dùng cung cấp phản hồi ngay lập tức cho người dùng, cải thiện trải nghiệm của họ. Cả hai đều được khuyến nghị xử lý dữ liệu một cách an toàn và thân thiện với người dùng.
17. Lợi ích của việc loại bỏ maxLength thuộc tính để xác thực nội tuyến?
18. Đang xóa maxLength cung cấp cho Formik và Yup toàn quyền kiểm soát quá trình xác thực, cho phép hiển thị các lỗi nội tuyến ngay khi vượt quá giới hạn ký tự mà không hạn chế trực tiếp độ dài đầu vào.

Suy nghĩ cuối cùng về xác thực nội tuyến theo thời gian thực

Việc triển khai xác thực nội tuyến bằng Formik và Yup mang lại trải nghiệm người dùng mượt mà hơn, tương tác hơn cho các trường giới hạn ký tự. Bằng cách loại bỏ chiều dài tối đa và sử dụng Formik's setFieldTouched về mặt chiến lược, người dùng có thể nhận được phản hồi tức thì mà không bị gián đoạn bởi các giới hạn cứng. Kỹ thuật này lý tưởng cho các tình huống như mẫu đơn đăng ký hoặc trường thông tin sinh học.

Cách tiếp cận này mang lại sự linh hoạt và có thể được tùy chỉnh thêm để phù hợp với nhu cầu cụ thể. Xác thực nội tuyến cho giới hạn ký tự đảm bảo tính nhất quán của dữ liệu và trải nghiệm thân thiện với người dùng, đặc biệt khi quản lý nhiều trường dựa trên ký tự. Bằng cách kết hợp Formik, Yup và JavaScript, các nhà phát triển có thể cung cấp xác thực trực quan và mạnh mẽ cho người dùng. 🚀