React中如何判断表单是否有效？（基于Material UI）

在React里，你不用逐个字段写if-else判断有效性，有两种主流方案可以实现类似Angular this.form.valid的便捷效果：

方案一：使用React Hook Form（推荐） #

React Hook Form是轻量高效的表单库，能和Material UI完美集成，自带表单状态管理，直接就能获取整体有效性。

步骤： #

1. 安装依赖：

npm install react-hook-form @hookform/resolvers yup

（这里用yup定义验证规则，也可替换为其他验证库）

2. 改写表单代码：

import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';
import { Grid, TextField, Button } from '@mui/material';

// 定义全局验证规则
const validationSchema = yup.object().shape({
  name: yup.string().required('姓名不能为空'),
  age: yup.number().required('年龄不能为空').positive('年龄必须为正数').integer('年龄必须是整数'),
  // 其他字段规则依次添加
});

export default function MyForm() {
  const { register, handleSubmit, formState: { errors, isValid } } = useForm({
    resolver: yupResolver(validationSchema),
    mode: 'onChange' // 实时验证，可选onSubmit等模式
  });

  const onSubmit = (data) => {
    console.log('验证通过，提交数据:', data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Grid container alignItems="center" justify="center" direction="column" gap={2}>
        <Grid item>
          <TextField
            id="name-input"
            name="name"
            label="姓名"
            type="text"
            error={!!errors.name}
            helperText={errors.name?.message}
            {...register('name')} // 自动关联字段状态
          />
        </Grid>
        <Grid item>
          <TextField
            id="age-input"
            name="age"
            label="年龄"
            type="number"
            error={!!errors.age}
            helperText={errors.age?.message}
            {...register('age')}
          />
        </Grid>
        <Grid item>
          {/* 表单无效时禁用提交按钮 */}
          <Button type="submit" variant="contained" disabled={!isValid}>
            提交
          </Button>
        </Grid>
      </Grid>
    </form>
  );
}

这里的isValid就是你需要的整体表单有效性状态，和Angular的form.valid用法完全一致，无需手动逐个检查字段。

方案二：自定义验证函数（无第三方库依赖） #

如果不想引入额外库，可以封装一个验证函数，自动遍历所有字段的错误状态：

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

export default function MyForm() {
  const [formValues, setFormValues] = useState({
    name: '',
    age: ''
    // 其他字段初始化
  });
  const [errors, setErrors] = useState({});

  // 单个字段验证逻辑
  const validateField = (name, value) => {
    let error = '';
    switch(name) {
      case 'name':
        if (!value.trim()) error = '姓名不能为空';
        break;
      case 'age':
        if (!value) {
          error = '年龄不能为空';
        } else if (isNaN(value) || value <=0 || !Number.isInteger(Number(value))) {
          error = '年龄必须是正整数';
        }
        break;
      // 其他字段验证规则
    }
    return error;
  };

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormValues(prev => ({ ...prev, [name]: value }));
    // 实时验证当前字段
    const error = validateField(name, value);
    setErrors(prev => ({ ...prev, [name]: error }));
  };

  // 判断整体表单是否有效
  const isFormValid = () => {
    return Object.values(errors).every(err => err === '') && 
           Object.values(formValues).every(val => val !== '');
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // 提交前全量验证所有字段
    const newErrors = {};
    Object.keys(formValues).forEach(name => {
      newErrors[name] = validateField(name, formValues[name]);
    });
    setErrors(newErrors);

    if (isFormValid()) {
      console.log('表单有效，提交数据:', formValues);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <Grid container alignItems="center" justify="center" direction="column" gap={2}>
        <Grid item>
          <TextField
            id="name-input"
            name="name"
            label="姓名"
            type="text"
            value={formValues.name}
            onChange={handleInputChange}
            error={!!errors.name}
            helperText={errors.name}
          />
        </Grid>
        <Grid item>
          <TextField
            id="age-input"
            name="age"
            label="年龄"
            type="number"
            value={formValues.age}
            onChange={handleInputChange}
            error={!!errors.age}
            helperText={errors.age}
          />
        </Grid>
        <Grid item>
          <Button type="submit" variant="contained" disabled={!isFormValid()}>
            提交
          </Button>
        </Grid>
      </Grid>
    </form>
  );
}

isFormValid()函数会自动检查所有字段的错误状态，返回布尔值，替代繁琐的逐个字段判断。

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