所需3项输入中的2项yup验证

Question

我用我的表格证明了这一点。我想验证用户是否至少完成了3个输入中的2个。当用户未完成时，我只想将文本的颜色更改为红色。如何设置我的架构来做到这一点。这是我的表格：

 <form>
      {!loading ? (
        <Paper title={t('common:cardTitles.extendDevice')} {...register('extendDevice')}>
          <div className="flex md:flex-row flex-col justify-center items-center md:justify-between border-b-[1px] md:pb-6 pb-[17px]">
            <h3 className="font-bold subheading">{t('common:deviceData')}</h3>
            <div className="flex flex-row gap-1">
              <ErrorIcon className="text-[#80858F] w-6" />
              <p
                className={mergeClasses(
                  'md:text-sm text-xs text-[#80858F]',
                  errors.extendDevice ? 'text-red-600' : 'text-[#80858F]',
                )}
              >
                {t('common:errors.atLeastTwoFields')}
              </p>
            </div>
          </div>
          <div className="md:pt-6 pt-[17px] grid md:grid-cols-2 gap-4">
            <TextInput
              {...register('serialNumber')}
              label={t('common:labels.serialNumber')}
              name="serialNumber"
              placeholder={t('common:placeholders.typeSerialNumber')}
            />
            <TextInput
              {...register('businessNumber')}
              label={t('common:labels.businessNumber')}
              name="business-number"
              placeholder={t('common:placeholders.typeBusinessNumber')}
            />
          </div>
          <div className="pt-4">
            <NumberInput
              {...register('pinNumber')}
              label={t('common:labels.pin')}
              name="pin-number"
              placeholder={t('common:placeholders.typePinNumber')}
            />
          </div>
          <div className="flex w-full justify-end pt-4">
            <Button
              className="py-3.5 px-6 bg-[#336BB3] text-white md:w-[115px] w-full"
              label={t('common:labels.verify')}
              onClick={handleSubmit(onSubmit)}
              type="submit"
            />
          </div>
        </Paper>
      ) : (
        <VerificationInProgress />
      )}
    </form>

Answer 1

您可以用YUP编写测试，以检查是否输入了特定字段。

const formValidation = Yup.object().shape({
    name: Yup.string().test(
      "oneOfRequired",
      "One of the three fields need to be filled in",
      function (item) {
        return this.parent.name || this.parent.surname || this.parent.country;
      }
    ),
    surname: Yup.string().test(
      "oneOfRequired",
      "One of the three fields need to be filled in",
      function (item) {
        return this.parent.name || this.parent.surname || this.parent.country;
      }
    ),
    country: Yup.string().test(
      "oneOfRequired",
      "One of the three fields need to be filled in",
      function (item) {
         // Check if one of them have been filled in 
        return this.parent.name || this.parent.surname || this.parent.country;
      }
    )
  });

下面是一个代码框：https://codesandbox.io/s/goofy-bell-ji28jy?file=/src/App.js:279-302