是的 phone 号码验证不起作用

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}'))

然后还可以做的更高级

是的 phone 号码验证不起作用

Yup phone number validation doesn't works

typescript

reactjs

yup

formik