如何用Formik+Yup实现TextField超250字符时实时显示内联验证错误？

核心思路是手动控制输入长度+即时触发Formik验证，既让用户输入第251个字符时触发错误提示，又不会让多余字符保留在输入框里。

步骤1：保留原有的Yup验证规则 #

const descriptionValidation = Yup.string()
  .max(250, 'Description cannot exceed 250 characters')
  .optional();

步骤2：修改TextField实现逻辑 #

去掉inputProps里的maxLength，改用Formik的上下文方法手动处理输入、触发验证和截断：

import { useFormikContext } from 'formik';
import TextField from '@mui/material/TextField';

// 在你的表单组件内部
const { setFieldValue, setFieldTouched, validateField, errors, touched } = useFormikContext();

// 渲染TextField
<TextField
  name="description"
  label="Description"
  multiline
  rows={4}
  placeholder="Optional"
  InputLabelProps={{
    shrink: true,
  }}
  error={Boolean(errors.description && touched.description)}
  helperText={errors.description && touched.description && errors.description}
  onChange={(event) => {
    const inputValue = event.target.value;
    // 标记字段为已触摸，确保错误能显示
    setFieldTouched('description', true);

    if (inputValue.length > 250) {
      // 触发即时验证，让Yup的错误提示显示出来
      validateField('description');
      // 截断到250字符，避免多余内容保留
      setFieldValue('description', inputValue.slice(0, 250));
    } else {
      // 正常更新输入值
      setFieldValue('description', inputValue);
      // 若之前有错误，现在长度合规，重新验证清除错误
      validateField('description');
    }
  }}
/>

为什么这个方案可行？ #

1. 不依赖原生maxLength，允许用户输入第251个字符的瞬间触发验证逻辑
2. 触发验证后立即截断输入，保证最终内容不超过250字符，无需提交时额外处理
3. 通过validateField强制即时验证，不用等字段失焦就能显示错误提示

可选优化：显示字符计数 #

如果想让用户更直观看到输入进度，可以修改helperText：

helperText={touched.description 
  ? errors.description 
    ? errors.description 
    : `${event.target.value.length}/250 characters`
  : ''
}

内容的提问来源于stack exchange，提问作者monika joshi