如何使用Yup为单个字段配置多个正则表达式验证？

需要验证输入框仅接受以下三种Google Maps类型的URL：

• https://maps.app.goo.gl/SomeString（Google Maps应用分享链接）
• https://www.google.com.mx/maps/SomeReallyBigStringAndOtherParams（只需匹配前缀https://www.google.com.mx/maps/）
• https://goo.gl/maps/SomeString（直接从地图分享的链接）

当前使用Yup结合React Hook Forms做验证，单个matches方法能处理一种情况，但多次调用matches会要求同时满足所有正则条件，导致验证失败。现有代码如下：

const areaSchema = yup.object().shape({
  // ...其他字段
  urlGoogleMaps: yup.string()
    .matches(/^https\:\/\/goo\.gl\/maps\//, 'Invalid google maps URL')
    .required(requiredMessage),
  // ...其他字段
});

尝试添加多个matches的示例（会导致验证失败）：

const areaSchema = yup.object().shape({
  // ...其他字段
  urlGoogleMaps: yup.string()
    .matches(/^https\:\/\/goo\.gl\/maps\//, 'Invalid google maps URL')
    .matches(/^https\:\/\/goo\.gl\/secondMaps\//, 'Invalid google maps URL')
    .required(requiredMessage),
  // ...其他字段
});

解决方案 #

不能多次调用matches，因为Yup的链式调用是逻辑与的关系，会要求输入同时满足所有正则规则。正确的做法是把三个URL的匹配规则合并到同一个正则表达式里，用|（逻辑或）来分隔不同的前缀匹配条件。

合并后的正则需要匹配以下任意一种前缀：

1. https://maps.app.goo.gl/
2. https://www.google.com.mx/maps/
3. https://goo.gl/maps/

对应的验证代码如下：

const areaSchema = yup.object().shape({
  // ...其他字段
  urlGoogleMaps: yup.string()
    .matches(
      /^https\:\/\/(maps\.app\.goo\.gl\/|www\.google\.com\.mx\/maps\/|goo\.gl\/maps\/)/,
      'Invalid google maps URL'
    )
    .required(requiredMessage),
  // ...其他字段
});

如果需要兼容HTTP（非HTTPS）的链接，或者允许URL里包含www的变体（比如部分Google Maps链接可能不带www），可以调整正则的灵活性，比如把www\.改成(www\.)?，或者把https改成https?来支持HTTP。

内容的提问来源于stack exchange，提问作者Miguel V