如何通过RHF的Yup resolver实现基于状态变量的文本框条件校验

可以实现，核心是结合Yup内置的when条件校验方法，关联你指定的状态变量动态生成校验规则即可，以下是可直接运行的示例：

示例场景 #

有一个开关控制是否需要填写备注，仅当开关打开（状态值为true）时，备注文本字段才执行必填校验。

完整代码示例 #

import { useState } from 'react';
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';

const ConditionalValidateForm = () => {
  // 指定的状态控制变量
  const [isRemarkRequired, setIsRemarkRequired] = useState(false);

  // 动态构建校验Schema，实时关联最新的状态值
  const validationSchema = yup.object({
    remark: yup.string().when([], {
      // 条件判断直接读取外部状态变量
      is: () => isRemarkRequired,
      // 条件成立时执行的校验规则
      then: (schema) => schema.required('备注不能为空'),
      // 条件不成立时跳过校验
      otherwise: (schema) => schema.notRequired()
    })
  // 这里传入依赖字段避免Yup报依赖警告
  }, [['remark']]);

  const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: yupResolver(validationSchema),
    defaultValues: {
      remark: ''
    }
  });

  const submitHandler = (formData) => {
    console.log('表单提交数据：', formData);
  };

  return (
    <form onSubmit={handleSubmit(submitHandler)}>
      <div style={{ marginBottom: 12 }}>
        <label style={{ display: 'flex', gap: 6 }}>
          <input
            type="checkbox"
            checked={isRemarkRequired}
            onChange={(e) => setIsRemarkRequired(e.target.checked)}
          />
          要求填写备注
        </label>
      </div>
      <div style={{ marginBottom: 12 }}>
        <label>备注：</label>
        <input type="text" {...register('remark')} style={{ marginLeft: 8 }} />
        {errors.remark && <p style={{ color: 'red', margin: '4px 0 0 0' }}>{errors.remark.message}</p>}
      </div>
      <button type="submit">提交表单</button>
    </form>
  );
};

export default ConditionalValidateForm;

注意事项 #

• 如果你的判断条件本身是表单内的字段值，无需额外定义外部state，直接将when的第一个参数设置为对应表单字段名即可，用法示例：when('isRemarkRequired', { is: true, then: ... })
• 用到外部状态做判断时，校验Schema需要定义在组件内部，保证状态更新时会重新生成最新的校验规则
• 多条件组合校验直接在is对应的回调函数里写逻辑即可，支持任意自定义判断规则

内容的提问来源于stack exchange，提问作者Alan Shajan Mattathil