Question

我有下一张表格和表格：

const formik = useFormik( {
    initialValues: {
      number: '',
    },
    onSubmit: values => {
      action( values.number );
    },
    validationSchema: numberSchema,
  } );

  return (
    <form onSubmit={formik.handleSubmit}>
      <SomeForm>
        <InputLabel htmlFor="some-number">
          <FormattedMessage {...messages.number} />
        </InputLabel>
        <Input
          value={formik.values.number}
          onChange={formik.handleChange}
          id="number"
          type="tel"
          placeholder="+1 (000) 000 0000"
        />
.
.
.

模式如下：

const numberSchema = Yup.object( {
    number:
        Yup.number().typeError( "That doesn't look like a phone number" )
            .required( 'Phone number is required!' )
            .positive()
            .min( 7 )
} );

问题在于验证输入数字的位数，当我仅输入一位数字时，我收到错误消息，该数字应大于或等于7，但是在第二次输入后，此错误消息消失了。为什么输入超过1位数字后它停止验证？

Answer 1

您将其验证为数字而不是字符串，因此，.min在这种情况下意味着数字值必须为最小值7。这不是长度。您必须将其验证为字符串并使用正则表达式模式。示例：

phoneSchema = Yup.string().matches(new RegExp('[0-9]{7}'))

然后您还可以使其更高级。

是的电话号码验证不起作用

1 个答案: