首页 > 解决方案 > 使用正则表达式进行 formik 表单验证

问题描述

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

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

这是我的 texbox

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

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

标签: javascriptreactjs

解决方案


是的,有一种matches方法可以检查正则表达式。

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

该方法的第一个参数是正则表达式,第二个参数是正则表达式失败时抛出的错误消息。


推荐阅读