Yup表单验证：字段没有触发也会显示错误。

这个问题可以通过在使用Yup时添加一个选项进行解决。在Yup的验证中，可以使用“validateOnChange”选项来控制是否需要在用户每次输入内容时验证表单。如果设置为false，则在触摸输入之前不会显示任何验证错误。以下是一个示例：

import * as Yup from 'yup';

const validationSchema = Yup.object().shape({
  name: Yup.string().required('Please enter a name'),
  email: Yup.string().email('Invalid email').required('Please enter an email'),
});

const initialValues = {
  name: '',
  email: '',
};

function MyForm() {
  const [values, setValues] = useState(initialValues);
  const [errors, setErrors] = useState({});

  const handleChange = e => {
    const { name, value } = e.target;
    setErrors({ ...errors, [name]: undefined });
    setValues({ ...values, [name]: value });
  };

  const handleSubmit = async e => {
    e.preventDefault();

    try {
      await validationSchema.validate(values, { abortEarly: false });
    } catch (err) {
      const newErrors = {};

      err.inner.forEach(validationError => {
        newErrors[validationError.path] = validationError.message;
      });

      setErrors(newErrors);

      return;
    }

    console.log('Form submitted:', values);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Name</label>
        <input type="text" name="name" value={values.name} onChange={handleChange} />

        {errors.name && <p className="error">{errors.name}</p>}
      </div>

      <div>
        <label>Email</label>
        <input type="email" name="email" value={values.email} onChange={handleChange} />

        {errors.email && <p className="error">{errors.email}</p>}
      </div>

      <button type="submit">Submit</button>
    </form>
  );
}

在这个例子中，“handleChange”函数当输入变化时被调用。它会更新表单的值，并清除任何现有的验证错误。当提交表单时，“handleSubmit”函数会验证这些输入是否都是有效的，并更新错误状态以显示验证失败的字段。如果选项“validateOnChange”未设置或设置为“true”，则在用户每次更改输入时都会进行验证。但是，如果将其设置为“false”，则只有当用户提交表单时才会进行验证。这可以帮助避免让