带有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—函数模式