使用正则表达式进行formik表单验证

Question

我的表单使用甲酸表单库。我需要验证我的文本框。这是我的验证文件

import * as Yup from "yup";
const POValidation = Yup.object().shape({
tax: Yup.number().typeError("Amount is invalid")
});
export { POValidation };

这是我的纹盒

<Form.Control
type="text"
size="sm"
placeholder=""
name="tax"
onChange={handleChange}
onBlur={handleBlur}
value={values.tax}
className={errors.tax && touched.tax && "input-error"}
/>

目前它只允许数字。但是字母可以输入。我需要避免在这个文本框中输入字母。我是怎么做这个的

Answer 1

Yup有一个matches方法，允许检查正则表达式。

Yup.string().matches(/^[0-9]+$/, "Only number allowed")

该方法的第一个参数是regex，第二个参数是在regex失败时抛出的错误消息。