使用 Formik 和 Yup 验证美国 phone 数字的正则表达式

Question

我正在尝试使用 yep 在我的 formik 表单中验证我们的 phone 数字。我在 Whosebug 上找到了一些关于正则表达式的信息，但它似乎没有用。我基本上需要能够允许括号、破折号和空格以及国家代码。后端将所有内容转换成如下内容：(123) 123-1234

这是我试过的：

                    validationSchema={Yup.object({
                        AdministratorCell: Yup.string()
                            .matches(/([0-9]{3})[0-9]{3}-[0-9]{4}/, {
                                message: "Invalid phone number",
                                excludeEmptyString: false,
                            })
                    })}

我在后端使用 https://github.com/google/libphonenumber 对那些 phone 数字进行后端验证，这就是为什么我需要前端验证才能正常工作，否则在某些情况下用户无法提交表单忘记号码或以某种方式格式化号码。我的问题是到目前为止我尝试过的是我只能添加具有特定格式的 phone 号码，否则它不会提交到后端。

Answer 1

我看到的一件事是需要区号。有时人们不指定是否在某些情况下假定它是本地的。你需要一个？在 ) 之后使其成为可选的。

括号用于在正则表达式中分组，因此您不想将它们用作文字。如果您不想使用它们来对区号进行分组，则需要将它们转义。

您的区号和其余号码之间没有分隔符。

您可能需要将 - 分隔符替换为 [- .]+ 或类似的分隔符，以防用户使用不同的分隔符，或者他们执行类似 111 - 111 - 1111 的操作。

一些不起作用的示例可能会有所帮助。

Answer 2

试试这个正则表达式它能满足你的要求

 /^((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}$/

看起来像这样：

validationSchema={Yup.object({
     AdministratorCell: Yup.string()
        .matches(/^((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}$/, {
           message: "Invalid phone number",
           excludeEmptyString: false,
     })
})}

使用 Formik 和 Yup 验证美国 phone 数字的正则表达式

Regular expression to validate US phone numbers using Formik and Yup

python

django

reactjs

formik