Mui Checkbox必填校验：如何展示错误提示信息？

• 封装独立的错误提示组件，通过props接收父组件传入的错误信息，内部做空值判断避免无效渲染
• 示例代码：

// ErrorMessage.jsx
export default function ErrorMessage({ message }) {
  if (!message) return null;
  return <div className="error-message">{message}</div>;
}

// 父组件中使用
import { useState } from 'react';
import ErrorMessage from './ErrorMessage';

function ParentForm() {
  const [submitError, setSubmitError] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const username = formData.get('username');
    
    if (!username) {
      setSubmitError('用户名不能为空');
      return;
    }
    // 后续提交逻辑
    setSubmitError('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="username" placeholder="用户名" />
      <ErrorMessage message={submitError} />
      <button type="submit">提交</button>
    </form>
  );
}

方案1：结合Formik使用（最常用） #

import { Formik, Form, Field } from 'formik';
import * as Yup from 'yup';

const UserSchema = Yup.object().shape({
  email: Yup.string()
    .email('请输入合法邮箱格式')
    .required('邮箱不能为空'),
  password: Yup.string()
    .min(6, '密码长度不能少于6位')
    .matches(/[A-Z]/, '密码需包含至少一个大写字母')
    .required('密码不能为空'),
});

function RegisterForm() {
  return (
    <Formik
      initialValues={{ email: '', password: '' }}
      validationSchema={UserSchema}
      onSubmit={(values) => {
        // 处理表单提交
        console.log('提交数据：', values);
      }}
    >
      {({ errors, touched }) => (
        <Form>
          <div>
            <label>邮箱</label>
            <Field name="email" type="email" />
            {errors.email && touched.email && <div className="error">{errors.email}</div>}
          </div>
          
          <div>
            <label>密码</label>
            <Field name="password" type="password" />
            {errors.password && touched.password && <div className="error">{errors.password}</div>}
          </div>
          
          <button type="submit">注册</button>
        </Form>
      )}
    </Formik>
  );
}

方案2：手动调用Yup校验 #

import * as Yup from 'yup';

const validateFormData = async (formData) => {
  const schema = Yup.object().shape({
    username: Yup.string().required('用户名是必填项'),
    age: Yup.number().min(18, '年龄需满18岁').required('年龄不能为空'),
  });

  try {
    // abortEarly设为false，返回所有字段的错误信息
    await schema.validate(formData, { abortEarly: false });
    return { isValid: true, errors: {} };
  } catch (err) {
    const errors = {};
    err.inner.forEach((error) => {
      errors[error.path] = error.message;
    });
    return { isValid: false, errors };
  }
};

// 调用示例
const testData = { username: '', age: 17 };
validateFormData(testData).then((result) => {
  if (!result.isValid) {
    console.log(result.errors); // { username: '用户名是必填项', age: '年龄需满18岁' }
    // 可将errors传入错误提示组件展示
  }
});

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