React表单Yup验证：5个输入框至少填一个的实现方案

开发者阿泽

2026-8-19

React表单Yup实现“至少填写一个字段”校验方案

1. 修正初始值配置

首先需要补全5个输入框的初始值，确保每个domain字段都在initialValues中：

initialValues={{
  domain0: "",
  domain1: "",
  domain2: "",
  domain3: "",
  domain4: ""
}}

2. Yup校验逻辑实现

通过Yup.object().test()方法添加全局自定义校验规则，检查5个字段中是否至少有一个非空值：

validationSchema={(Yup) =>
  Yup.object().shape({
    // 单个字段无需设置required，仅做格式校验（如需）
    domain0: Yup.string(),
    domain1: Yup.string(),
    domain2: Yup.string(),
    domain3: Yup.string(),
    domain4: Yup.string()
  }).test(
    'at-least-one-domain', // 校验规则名称，用于定位错误
    '请至少填写一个字段', // 错误提示文本
    function (formValues) {
      // 遍历所有domain字段，判断是否存在非空（去除首尾空格后）的值
      return Object.values(formValues).some(domain => domain.trim() !== '')
    }
  )
}

3. 表单中渲染错误提示

在校验不通过时，需要在表单合适位置显示全局错误信息，同时补全React循环元素的key属性：

<div>
  <Label className="" text="Domains" />
  {/* 渲染全局校验错误 */}
  {errors['at-least-one-domain'] && <div className="text-danger">{errors['at-least-one-domain']}</div>}
  <div className="oui-row oui-px-2">
    {[...Array(5)].map((e, i) => {
      return (
        <div className="col-4" key={i}>
          <Input
            type="text"
            name={`domain${i}`}
            value={values[`domain${i}`]}
            validationProps={props}
          />
        </div>
      )
    })}
  </div>
</div>