多选框的Yup验证

Question

我需要创建以下带有多个复选框的字段。我需要以下验证：

1. 至少选择其中一个
2. 如果是其他字段，用户需要将文本添加到输入字段中

我需要编写 yup 验证以实现此目的。

- Anjula Samarasinghe

Answer 1

1. 至少选择其中一个：
   这是您将使用yup验证规则执行该逻辑的方式

const validationSchema = yup.object().shape({
  assets: yup.array().min(1).of(yup.string().required()).required(),
});

如果是其他字段，用户需要将文本添加到输入字段中： 你也可以使用Formik来执行这个逻辑，但我建议你为“资产”创建一个本地状态，如果你想使用文本字段创建新的资产，只需将该新资产推入资产本地字段即可，然后它将自动在屏幕上呈现该新资产。 然后，您可以勾选或取消勾选该新资产。希望您了解这一点。 这是您可以检查的代码片段！

   import { useState } from "react";
    import * as yup from "yup";
    import { FieldArray, Formik } from "formik";
    
    const initialValues = {
      assets: [],
    };
    
    const validationSchema = yup.object().shape({
      assets: yup.array().min(1).of(yup.string().required()).required(),
    });
    
    function Form() {
      const [newAsset, setNewAsset] = useState("");
      const [assets, setAssets] = useState([
        "Property",
        "Motor Vehicles",
        "Financial Assets",
      ]);
    
      const handleAddNewAsset = () => {
        if (newAsset) {
          setAssets([...assets, newAsset]);
          setNewAsset("");
        }
      };
    
      return (
        <>
          <Formik
            initialValues={initialValues}
            validationSchema={validationSchema}
            onSubmit={(values) => {
              console.log("form values if validation succeed: ", values);
            }}
          >
            {(props) => (
              <form onSubmit={props.handleSubmit}>
                <FieldArray
                  name="assets"
                  render={(arrayHelpers) => (
                    <>
                      {assets.map((asset, idx) => (
                        <label className="form-check-label my-1">
                          <input
                            name={`assets.${idx}`}
                            type="checkbox"
                            className="form-check-input"
                            value={asset}
                            checked={props.values.assets.includes(asset)}
                            onChange={(e) => {
                              if (e.target.checked) {
                                arrayHelpers.push(asset);
                              } else {
                                const index = props.values.assets.indexOf(asset);
                                arrayHelpers.remove(index);
                              }
                            }}
                          />
                          <span className="mx-2">{asset}</span>
                        </label>
                      ))}
                    </>
                  )}
                />
                <input
                  type="text"
                  value={newAsset}
                  onChange={(e) => setNewAsset(e.target.value)}
                />
                <button type="button" onClick={handleAddNewAsset}>
                  Others (specify)
                </button>
              </form>
            )}
          </Formik>
        </>
      );
    }

我希望这将有所帮助。 谢谢！

- Jazim Abbas

---

感谢您提供这段代码片段，它可能会提供一些有限的即时帮助。一个适当的解释将极大地提高其长期价值，因为它能够展示为什么这是一个好的问题解决方法，并使其对未来有类似问题的读者更加有用。请[编辑]您的答案，添加一些解释，包括您所做的假设。 - jasie

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心找到有关如何编写良好答案的更多信息。 - Community

Answer 2

对于问题1-至少应选择其中一个

请尝试以下validationSchema

const validationSchema = Yup.object({checked: Yup.array().min(1, '选择您感兴趣的选项中至少有一个') });

在FormIk中使用以下initialValues： <Formik initialValues={{checked: []}} />

对于问题2-其他字段验证，您可以查看yup api文档。

- Tariq Murtuza