Question

我正在尝试使表单只有在符合某种模式时才有效。

必须匹配：

123456789
123-456-789
123 458 789

这是我的模式：

^(\d{3}-\d{3}-\d{3})|(\d{3} \d{3} \d{3})|(\d{9})$

首先，有趣的事实是，为了能够在Validator上使用它，我似乎要逃避它中的每一个斜线。

Validators.pattern('^(\\d{3}-\\d{3}-\\d{3})|(\\d{3} \\d{3} \\d{3})|(\\d{9})$')

我的问题是它不会限制字符串总数。

例如，它匹配1234567890000，我希望它停在123456789，任何其他字符都会触发错误状态。

我试过这些变种：

Validators.pattern('^(\\d{3}-\\d{3}-\\d{3})|(\\d{3} \\d{3} \\d{3})|(\\d{9})$')
Validators.pattern('(\\d{3}-\\d{3}-\\d{3})|(\\d{3} \\d{3} \\d{3})|(\\d{9})')

另一个有趣的事实，如果我将其设置为：

Validators.pattern('\\d{9}')

或

Validators.pattern('^\\d{9}$')

然后我只能设置9个字符。

我确定这是一个正则表达式错误，但我不明白Angular2是否需要给他^和$符号来分隔要评估的字符串。

Answer 1

您必须使用双反斜杠，因为模式作为字符串文字传递给正则表达式引擎，并且正则表达式转义需要带有\d，\w等的文字反斜杠。

根据我的测试结果，angular会在模式周围添加^和$个锚点，而不会将其分组。

这意味着，当您有交替组时，用分组构造包装它们，以便锚点可以应用于所有替代方案。

您的^(\\d{3}-\\d{3}-\\d{3})|(\\d{3} \\d{3} \\d{3})|(\\d{9})$和其他已尝试的模式包含未展开的替代方案，因此^仅适用于(\\d{3}-\\d{3}-\\d{3})而$仅适用于(\\d{9})。

使用

'(?:\\d{3}([- ])\\d{3}\\1\\d{3}|\\d{9})'

在验证码内，它会显示为^(?:\\d{3}([- ])\\d{3}\\1\\d{3}|\\d{9})$，并且会像in this demo一样工作。

详细信息：该模式将匹配2个替代方案：

\\d{3}([- ])\\d{3}\\1\\d{3} - 3个数字，-或空格（捕获到第1组），然后是3位数，然后是与第1组相同的分隔符，然后是3位数
| - 或
\\d{9} - 9位数

由于^和$是按角度添加的，因此模式将需要完整的字符串匹配。

Answer 2

设置Validator.maxLength将不允许用户键入超过给定长度的字符。

new FormControl('', Validators.maxLength(9)

Angular2模型驱动的表单验证器模式

2 个答案: