使用Formik + Yup验证react-input-mask长度

npm install formik yup

yarn add formik yup

import React from "react";
import { useFormik } from "formik";
import * as Yup from "yup";
import InputMask from "react-input-mask";

const validationSchema = Yup.object().shape({
  input: Yup.string()
    .required("必填字段")
    .min(5, "最小长度为5个字符")
    .max(10, "最大长度为10个字符")
});

const MyForm = () => {
  const formik = useFormik({
    initialValues: {
      input: ""
    },
    validationSchema,
    onSubmit: values => {
      console.log(values);
    }
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <InputMask
        mask="999-999"
        name="input"
        value={formik.values.input}
        onChange={formik.handleChange}
        onBlur={formik.handleBlur}
      />
      {formik.touched.input && formik.errors.input ? (
        <div>{formik.errors.input}</div>
      ) : null}
      <button type="submit">提交</button>
    </form>
  );
};