React <textarea>组件在Chrome/Edge中通过value传值时minlength验证失效求助

问题核心 #

当Material-UI的TextField开启multiline后会渲染为原生<textarea>，此时设置minlength属性在Chrome和Edge浏览器中失效——即使内容长度不足要求，表单验证仍会通过；但Firefox能正常触发验证。根源是Chrome/Edge对通过value属性绑定值的<textarea>，不会触发原生minlength校验，只有把内容作为子元素传入时才生效，而React受控组件模式正是用value来管理<textarea>状态的。

解决方案 #

因为浏览器行为差异无法通过原生属性解决，推荐用自定义表单验证来保证跨浏览器一致性，以下是具体实现方式：

1. 手动在提交时做长度校验 #

在表单提交函数中直接检查内容长度，同时结合Material-UI的错误提示组件反馈给用户：

import { useState } from 'react';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';

export default function MultilineTextField() {
  const [textareaValue, setTextareaValue] = useState('');
  const [error, setError] = useState(false);
  const [helperText, setHelperText] = useState('');

  const handleTextareaChange = (e) => {
    setTextareaValue(e.target.value);
    // 输入时清除错误提示
    if (error) {
      setError(false);
      setHelperText('');
    }
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (textareaValue.length < 5) {
      setError(true);
      setHelperText('内容长度不能少于5个字符');
      return;
    }
    // 执行正常提交逻辑
    console.log('提交内容：', textareaValue);
  };

  return (
    <form onSubmit={handleSubmit}>
      <TextField
        multiline
        rows={4}
        value={textareaValue}
        onChange={handleTextareaChange}
        error={error}
        helperText={helperText}
        // 保留minlength作为浏览器原生提示（可选，仅Firefox生效）
        inputProps={{ minLength: 5 }}
        label="多行输入"
        fullWidth
      />
      <Button type="submit" variant="contained" sx={{ mt: 2 }}>
        提交
      </Button>
    </form>
  );
}

2. 使用React Hook Form（如果项目已集成） #

如果项目用了React Hook Form，可以借助它的校验规则实现更便捷的跨浏览器验证：

import { useForm } from 'react-hook-form';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';

export default function MultilineTextFieldWithHookForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = (data) => {
    console.log('提交内容：', data.textarea);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <TextField
        multiline
        rows={4}
        label="多行输入"
        fullWidth
        {...register('textarea', {
          minLength: {
            value: 5,
            message: '内容长度不能少于5个字符'
          }
        })}
        error={!!errors.textarea}
        helperText={errors.textarea?.message}
      />
      <Button type="submit" variant="contained" sx={{ mt: 2 }}>
        提交
      </Button>
    </form>
  );
}

补充说明 #

• MDN提到“<textarea>不支持value属性”是指原生HTML中<textarea>的内容是通过子节点定义的，而非value属性；但React通过受控组件机制，用value prop来统一管理输入控件状态，这就造成了浏览器对原生验证逻辑的处理差异。
• 这个问题在开发者社区很常见，Chrome和Edge的这个行为属于浏览器实现细节，暂时没有官方修复方案，所以自定义验证是最稳妥的跨浏览器解决方案。

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