使用 Yup 和 Formik 在 React Forms 中实现内联字符限制验证

使用 Formik、Yup 和 TypeScript 在 React 表单中实现内联验证

解决方案 1：使用 Yup 字符限制验证来响应前端表单

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;

使用 Express.js 和 Yup 进行后端验证字符限制

解决方案 3：使用 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 是的进行验证？
2. Formik 和 Yup 的组合简化了 React 应用程序中的表单处理和验证，特别是对于较大的表单或具有复杂验证需求的表单。 Formik 管理表单状态，而 Yup 处理验证模式。
3. 怎么样 setFieldTouched 不同于 setFieldValue 在福米克？
4. setFieldTouched 更新字段的“触摸”状态，将其标记为已交互以进行验证目的，同时 setFieldValue 直接更新字段的值。它们共同帮助管理验证发生的时间和方式。
5. 我可以同时使用本机吗 maxLength 是的验证？
6. 使用 maxLength 限制前端的输入长度，但可能会阻止 Yup 的验证触发内联错误。如果需要内联验证，请考虑删除 maxLength 并依赖 Yup 和 Formik 的 onChange 处理程序。
7. 我为什么要使用 FieldArray 在 Formik 中进行验证？
8. FieldArray 允许开发人员处理动态表单，其中多个字段遵循类似的验证规则，使其成为评论或标签等每个条目都有特定要求的项目列表的理想选择。
9. 什么是去抖函数，为什么将其与 Formik 验证一起使用？
10. 去抖动是一种延迟验证直到用户暂停键入的技术，从而减少过多的验证调用。它对于较长的文本字段特别有用，可以防止过早的验证消息可能分散用户的注意力。
11. 使用 Yup 验证多个字段的最佳实践是什么？
12. 使用是的 object 和 array 架构来定义复杂的验证，并应用自定义错误消息以明确哪些字段不满足要求。
13. 如何动态向用户显示剩余字符？
14. 使用 helperText Material-UI 中的 TextField 组件允许实时字符计数显示，这可以通过帮助用户跟踪其剩余输入容量来提高可用性。
15. 后端验证可以用 Yup 代替前端验证吗？
16. 后端验证对于数据完整性至关重要，但前端验证可以向用户提供即时反馈，从而改善他们的体验。建议使用两者来安全且用户友好地处理数据。
17. 去掉有什么好处 maxLength 内联验证的属性？
18. 去除 maxLength 使 Formik 和 Yup 能够完全控制验证过程，一旦超出字符限制就允许显示内联错误，而无需直接限制输入长度。

关于实时内联验证的最终想法

使用 Formik 和 Yup 实施内联验证可为字符限制字段提供更流畅、更具交互性的用户体验。通过删除 最大长度 并使用福米克的 设置触摸字段 从策略上讲，用户可以获得即时反馈，而不会受到硬性限制的干扰。该技术非常适合应用程序或生物领域等场景。

这种方法提供了灵活性，并且可以进一步定制以满足特定需求。字符限制的内联验证可确保数据一致性和用户友好的体验，特别是在管理多个基于字符的字段时。通过结合 Formik、Yup 和 JavaScript，开发人员可以为用户提供直观且强大的验证。 🚀