使用formik在React js中的第五个字符后添加/

Question

嘿，我是React js的新手，我想知道如何解决这个问题如何在第五个字符后面添加。有没有一种方法可以用formik或任何通用的方法来做到这一点？

number: Yup.string()
.min(11, "Minimum 11 characters")
.max(11, "Maximum 5 characters")
.required("This field is required"),
// add dash after fifth character

谢谢你的每一个回答。我真的很感激：(

Answer 1

您可以使用yupstransform方法添加破折号。

类似于：

number: Yup.string()
.transform((value) => value.slice(0, 5) + "-" + value.slice(5))
.min(11, "Minimum 11 characters")
.max(11, "Maximum 5 characters")
.required("This field is required"),

请记住，转换是在验证之前运行的，因此您很可能希望更改min和max的限制