带有 Yup 的 Formik 允许在给出空字符串时进行有效验证

Question

我在 React 应用程序中有一个表单，它使用 Formik with You 进行验证。验证按预期工作，除了用户可以在字段中输入带有一个或多个空格的字符串，这将允许验证通过并提交表单。我看不到确保输入每个字段的字符串不是包含空格（“”）的空字符串的明显方法。

这是我的代码：

const formik = useFormik<yup.InferType<typeof validationSchema>>({
    initialValues: {
      addressLine1: portfolioState.clientAddress.addressLine1,
      addressLine2: portfolioState.clientAddress.addressLine2,
      postcode: portfolioState.clientAddress.postcode,
      cityOrTownName: portfolioState.clientAddress.cityOrTownName,
      county: portfolioState.clientAddress.county,
      country: countryByLocale[onboardingState.settingsState.locale],
    },

    onSubmit: async () => {
      console.log(Object.entries(formik.values));
      const { createdDate, lastModifiedDate, postcode, ...rest } = portfolioState.clientAddress;
      const addressUpdatePayload = {
        ...rest,
        ...formik.values,
        addressType: AddressTypeEnum.INVOICE,
      };
      ...       

    },
    validationSchema,
  });

    <FormWrapper>
          <Form onSubmit={formik.handleSubmit}>
            <Form.Group style={styles.formGroupStyle}>
              <Form.Label className="required">{t('auth:addressLine1.label')}</Form.Label>
              <Form.Control
                type="text"
                maxLength={30}
                name="addressLine1"
                onChange={formik.handleChange}
                value={formik.values.addressLine1}
                isValid={formik.touched.addressLine1 && !formik.errors.addressLine1}
                isInvalid={Boolean(formik.errors.addressLine1)}
              />
              <span style={styles.subText}>{t('auth:addressLine1.subText')}</span>
            </Form.Group>

            <Form.Group style={styles.formGroupStyle}>
              <Form.Label>{t('auth:addressLine2.label')}</Form.Label>
              <Form.Control
                type="text"
                maxLength={30}
                name="addressLine2"
                onChange={formik.handleChange}
                value={formik.values.addressLine2}
                isValid={formik.touched.addressLine2 && !formik.errors.addressLine2}
                isInvalid={Boolean(formik.errors.addressLine2)}
              />
              <span style={styles.subText}>{t('auth:addressLine2.subText')}</span>
            </Form.Group>

            <Form.Group style={{ ...styles.formGroupStyle, ...styles.flexFormGroup }}>
              <div style={{ marginRight: 15 }}>
                <Form.Label className="required" style={{ whiteSpace: 'nowrap' }}>
                  {showUkInputs ? t('auth:postcode.label') : t('auth:zipCode.label')}
                </Form.Label>
                <Form.Control
                  type="text"
                  name="postcode"
                  maxLength={7}
                  onChange={formik.handleChange}
                  value={formik.values.postcode}
                  isValid={formik.touched.postcode && !formik.errors.postcode}
                  isInvalid={Boolean(formik.errors.postcode)}
                />
              </div>

              <div>
                <Form.Label className="required">{t('auth:cityOrTownName.label')}</Form.Label>
                <Form.Control
                  type="text"
                  name="cityOrTownName"
                  onChange={formik.handleChange}
                  value={formik.values.cityOrTownName}
                  isValid={formik.touched.cityOrTownName && !formik.errors.cityOrTownName}
                  isInvalid={Boolean(formik.errors.cityOrTownName)}
                />
              </div>

              <div style={{ marginLeft: 15 }}>
                <Form.Label>{showUkInputs ? t('auth:county.label') : t('auth:state.label')}</Form.Label>
                <Form.Control
                  type="string"
                  name="county"
                  onChange={formik.handleChange}
                  value={formik.values.county}
                  isValid={formik.touched.county && !formik.errors.county}
                  isInvalid={Boolean(formik.errors.county)}
                />
              </div>
            </Form.Group>

            <Form.Group style={styles.formGroupStyle}>
              <Form.Label>{t('auth:country.label')}</Form.Label>

              <Form.Control
                name="country"
                as="select"
                value={formik.values.country}
                onChange={handleCountryChange()}
                style={styles.countrySelect}
                isValid={!formik.errors.country}
              >
                {countriesList.map((item: ICountrySelectValue) => (
                  <option
                    aria-selected="true"
                    key={item.key}
                    value={item.value}
                    selected={item.value === portfolioState.userDetails.country}
                  >
                    {item.key}
                  </option>
                ))}
              </Form.Control>
            </Form.Group>
            <Button
              id="billing-address-submit"
              type="submit"
              style={{
                ...{ backgroundColor: GlobalStyles.cultOrange, color: 'black', marginTop: 30 },
                ...(styles.buttonStyle as React.CSSProperties),
              }}
              disabled={onboardingState.uiState.allowContinue === false || formik.isSubmitting || !formik.isValid}
            >
              {t('common:continue')}
            </Button>
          </Form>
        </FormWrapper>

任何人都可以提供任何建议吗？ 谢谢

Answer 1

要防止用户在文本输入字段中输入空字符串，您可以使用 这.trim()验证中的方法。这是文档的链接。 [1]：https://github.com/jquense/yup#stringtrimmessage-string--function-schema