日期验证模式不适用于 Angular 2 验证模式

Question

我在这里问是因为我怀疑 Angular 2 验证模式可能与其他语言的验证模式不同。

我有一个日期模式用于我的 asp.net 验证以获取 mm/dd/yyyy，它考虑了闰年等，并且还接受 m/d/yyyy。它的使用方式如下。

dateSubmitted: [null, [Validators.required, Validators.pattern('((^(10|12|0?[13578])([/])(3[01]|[12][0-9]|0?[1-9])([/])((1[8-9]\d{2})|([2-9]\d{3}))$)|(^(11|0?[469])([/])(30|[12][0-9]|0?[1-9])([/])((1[8-9]\d{2})|([2-9]\d{3}))$)|(^(0?2)([/])(2[0-8]|1[0-9]|0?[1-9])([/])((1[8-9]\d{2})|([2-9]\d{3}))$)|(^(0?2)([/])(29)([/])([2468][048]00)$)|(^(0?2)([/])(29)([/])([3579][26]00)$)|(^(0?2)([/])(29)([/])([1][89][0][48])$)|(^(0?2)([/])(29)([/])([2-9][0-9][0][48])$)|(^(0?2)([/])(29)([/])([1][89][2468][048])$)|(^(0?2)([/])(29)([/])([2-9][0-9][2468][048])$)|(^(0?2)([/])(29)([/])([1][89][13579][26])$)|(^(0?2)([/])(29)([/])([2-9][0-9][13579][26])$))')]],

此模式在我的 asp.net 应用程序中运行良好，但它不在 Angular2 中，无论我尝试在输入框中键入正确的日期格式还是使用材料日期选择器输入它都会失败。我还没有找到任何关于此的信息。我已经成功地在 Angular2 中应用了其他模式，比如电子邮件。

如果需要此信息，我的 package.json 中的 Angular 版本如下：

"@angular/animations": "^4.3.6",
    "@angular/cdk": "^2.0.0-beta.10",
    "@angular/common": "^4.1.0",
    "@angular/compiler": "^4.1.0",
    "@angular/core": "^4.1.0",
    "@angular/forms": "^4.1.0",
    "@angular/http": "^4.1.0",
    "@angular/material": "^2.0.0-beta.10",
    "@angular/platform-browser": "^4.1.0",
    "@angular/platform-browser-dynamic": "^4.1.0",
    "@angular/router": "^4.1.0",
    "@ngrx/core": "^1.2.0",

编辑：添加 plunker：https://plnkr.co/edit/qHPZceVTpS4x1AEqZfjA

Answer 1

由于\d 被视为字符串转义序列而不是正则表达式转义序列，您一直使用的模式未正确编译。为此，您需要将反斜杠加倍。

此外，您的备选方案都包含在 ^ 和 $ 锚点中。虽然它是正确的，但它看起来效率不高：在模式的开头放置一个 ^，在模式的末尾放置一个 $，同时将替代方案包装在一个非捕获组中是有意义的。

此外，您可以将所有捕获组转换为非捕获组（即 (...) 到 (?:...)）以获得更多性能，并将 [/] 替换为 /，因为 / 符号不需要在 RegExp 构造函数中转义。

所以，你可以使用

dateSubmitted: [null, [Validators.required, Validators.pattern('^(?:(?:10|12|0?[13578])/(?:3[01]|[12][0-9]|0?[1-9])/(?:1[8-9]\\d{2}|[2-9]\\d{3})|(?:11|0?[469])/(?:30|[12][0-9]|0?[1-9])/(?:1[8-9]\\d{2}|[2-9]\\d{3})|0?2/(?:2[0-8]|1[0-9]|0?[1-9])/(?:1[8-9]\\d{2}|[2-9]\\d{3})|0?2/29/[2468][048]00|0?2/29/[3579][26]00|0?2/29/[1][89][0][48]|0?2/29/[2-9][0-9][0][48]|0?2/29/1[89][2468][048]|0?2/29/[2-9][0-9][2468][048]|0?2/29/1[89][13579][26]|0?2/29/[2-9][0-9][13579][26])$')]],

请参阅updated Plunkr。