Question

我正在尝试使用formik / yup / material-ui /和react-input-mask验证我的输入。从validationSchema中，只有一个选项可以正常工作：.required。当我尝试通过输入的最小/最大长度进行验证时，它无法正常工作。

当我将输入的掩码设置为等于{{99 9999“}时，yup看起来像7个字符（6位数字和一个空格）一样，并且在输入字段中键入时不会改变。

例如，当我设置时： .min(7, "Password must contain at least 7 characters")

在validationSchema中，即使我在文本字段中未键入任何内容，我也始终不会出错。

当我设置min(8, "Password must contain at least 8 characters") 时，即使输入内容，我也会始终收到错误反馈。看起来输入的长度始终等于掩码的长度。

有我的输入字段：

 <InputMask
    mask={"99 9999"}
    value={name}
    onChange={change.bind(null, "name")}
  >
    {() => (
      <TextField
        id="name"
        name="name"
        variant="outlined"
        helperText={touched.name ? errors.name : ""}
        error={touched.name && Boolean(errors.name)}
        label="Name"
        fullWidth
      />
    )}
 </InputMask>

在那里您可以看到我的完整代码：

https://codesandbox.io/s/zrrxol5614

怎么了？

Answer 1

您的示例

const validationSchema = Yup.object({
  name: Yup.string("Enter a name")
  .required("Name is required")
  .min(7, "Password must contain at least 7 characters")
});

具有无遮盖的变换

const validationSchema = Yup.object({
  name: Yup.string("Enter a name")
  .required("Name is required")
  .transform(value => value.replace(/[^\d]/g, ''))
  .min(6, "Name must contain at least 6 characters")
});

为什么？

如果输入中存在占位符和空格，则将它们与值一起发送到验证器。您可以沿途取消遮罩或运行如上所示的转换。这种特殊的转换只是在验证之前从字符串中删除了所有非数字，因此您必须根据需要进行更改。

如何使用material-ui，formik，yup和react-input-mask正确验证蒙版输入？

1 个答案: