如何使用 material-ui、formik、yup 和 react-input-mask 正确验证屏蔽输入？答案

【问题标题】：How to correctly validate an masked-input using material-ui, formik, yup, and react-input-mask?如何使用 material-ui、formik、yup 和 react-input-mask 正确验证屏蔽输入？
【发布时间】：2019-06-14 04:04:03
【问题描述】：

我正在尝试使用 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

做错了什么？

【问题讨论】：

我通过向我的 validationSchema 添加自定义方法解决了这个问题，我正在检查我的输入值是否包含字符：“_”。如果是，我将返回 false。

标签： reactjs material-ui input-mask formik yup

【解决方案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")
});

为什么？

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

【讨论】：

【解决方案2】：

你需要使用 trim()

const validationSchema = Yup.object({
  name: Yup.string()
  .required("Name is required")
  .test(value => value.trim().length > 6)
});

Trim 帮助您从输入掩码的输出中删除空格

【讨论】：