React Hook Form表单验证与错误提示失效问题排查求助

我看了你代码里的问题啦，核心是Controller的rules配置方式错误，还有错误提示没有和Material UI组件结合起来，咱们一步步把这些问题解决掉：

1. 修正Controller的规则配置逻辑 #

你之前尝试用rules={register({ required: true, minLength: 8 })}是不对的——Controller是通过control属性和React Hook Form关联的，它的rules参数直接接收验证规则对象，不需要用register包裹。

2. 完善验证规则（包含密码正则、长度限制） #

我们可以给密码字段添加完整的验证规则：

• 必填验证
• 最小长度8位、最大长度20位
• 正则验证（比如要求包含大小写字母、数字、特殊字符）

3. 整合错误提示到Material UI组件 #

把React Hook Form的错误信息传递给Material UI TextField的error和helperText属性，这样错误提示会自动使用Material UI的美观样式，而不是生硬的文本。

4. 设置验证触发模式 #

建议给useForm添加mode配置，比如mode: "onBlur"（失去焦点时验证）或者mode: "onChange"（实时输入验证），提升用户体验。

修改后的完整代码 #

import React from 'react';
import { useForm, Controller } from 'react-hook-form';
import { Link } from 'react-router-dom';
// COMPONENTS
import Button from '../01-atoms/inputs/Button';
import Textfield from '../01-atoms/inputs/Textfield';
// MATERIAL UI - CORE
import Fade from '@material-ui/core/Fade';
import Grid from '@material-ui/core/Grid';
import InputAdornment from '@material-ui/core/InputAdornment';
import Typography from '@material-ui/core/Typography';
import Paper from '@material-ui/core/Paper';
// MATERIAL UI - ICONS
import LockSharpIcon from '@material-ui/icons/LockSharp';
import PersonAddSharpIcon from '@material-ui/icons/PersonAddSharp';

export default function SignUp({ i18n, submitSignUpData }) {
  // 添加mode配置，让验证在失去焦点时触发
  const { register, handleSubmit, control, errors } = useForm({
    mode: "onBlur"
  });

  // 密码正则：要求包含大小写字母、数字、特殊字符，长度8-20位
  const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,20}$/;

  return (
    <Grid item xs={12} sm={6} md={3}>
      <Fade in>
        <Paper elevation={3}>
          <Typography align='center' gutterBottom variant='h5'>
            {i18n.sign_up.page_title}
          </Typography>
          <form onSubmit={handleSubmit(submitSignUpData)}>
            <Grid container spacing={1}>
              <Grid item xs={12}>
                <Controller
                  as={Textfield}
                  name='newPassword'
                  control={control}
                  defaultValue=''
                  fullWidth
                  label={i18n.login.password_placeholder}
                  variant='outlined'
                  type='password'
                  // 关键：正确配置rules，不需要register包裹
                  rules={{
                    required: '密码不能为空',
                    minLength: {
                      value: 8,
                      message: '密码长度不能少于8位'
                    },
                    maxLength: {
                      value: 20,
                      message: '密码长度不能超过20位'
                    },
                    pattern: {
                      value: passwordRegex,
                      message: '密码需要包含大小写字母、数字和特殊字符'
                    }
                  }}
                  // 把错误信息传递给Material UI组件
                  error={!!errors.newPassword}
                  helperText={errors.newPassword?.message}
                  InputProps={{
                    endAdornment: (
                      <InputAdornment position='end'>
                        <LockSharpIcon />
                      </InputAdornment>
                    ),
                  }}
                />
              </Grid>
              <Grid item xs={12}>
                <Button
                  fullWidth
                  content={i18n.sign_up.get_started_button}
                  variant='contained'
                  color='secondary'
                  type='submit'
                  endIcon={<PersonAddSharpIcon />}
                />
              </Grid>
            </Grid>
          </form>
          <Link to='/log-in'>
            <Typography>{i18n.login.login_button}</Typography>
          </Link>
        </Paper>
      </Fade>
    </Grid>
  );
}

关键变化说明 #

• Controller的rules：直接传入验证规则对象，每个规则可以自定义错误提示文本
• 错误提示整合：通过error和helperText属性，把RHF的错误信息映射到Material UI TextField的样式上
• 验证模式：设置mode: "onBlur"让验证在用户输入完一个字段后触发，避免实时提示打扰用户（也可以改成onChange实时验证）
• 密码正则：添加了符合常见要求的密码强度验证规则，你可以根据需求调整正则表达式

这样修改后，React Hook Form的验证就会正常生效，错误提示也会和Material UI的样式统一，完全满足你的需求啦！

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