Angular2 / 4电话验证

时间:2017-09-26 09:05:43

标签: html regex validation angular2-forms angular4-forms

我正在尝试在Angular 2/4中实现一个表单。电话号码有一个字段。我使用正则表达式

pattern="^\s*(?:\+?(\d{1,3}))?[- (]*(\d{3})[- )]*(\d{3})[- ]*(\d{4})(?: *[x/#]{1}(\d+))?\s*$"

在相应的输入字段中。它接受几乎所有格式,但不接受以下内容:

  1. 754-3010(本地)

  2. (541)754-3010(国内)

  3. + 1-541-754-3010(国际)

  4. 更多它应该接受+, - ,(和)字符。

    希望有人可以提供帮助

1 个答案:

答案 0 :(得分:4)

您可以使用可选的非捕获组使正则表达式的一部分可选。

使用

^\s*(?:\+?\d{1,3})?[- (]*\d{3}(?:[- )]*\d{3})?[- ]*\d{4}(?: *[x/#]\d+)?\s*$
                              ^^^           ^^

请参阅regex demo

请注意,{1}是多余的,您可以删除它。

对于捕获组,如果需要,可以保留原始组,但如果您只是在验证,我宁愿删除它们。

<强>详情

  • ^ - 字符串的开头
  • \s* - 0+ whitespaces
  • (?:\+?\d{1,3})? - 可选序列:
    • \+? - 可选的(1或0)+符号
    • \d{1,3} - 任意1至3位数字
  • [- (]* - -,空格或(
  • \d{3} - 任意3位数字
  • (?:[- )]*\d{3})? - 可选序列:
    • [- )]* - 0 + -,空格或)
    • \d{3} - 任意3位数字
  • [- ]* - 0+空格或-
  • \d{4} - 任意4位数字
  • (?: *[x/#]\d+)?
  • \s* - 0+ whitespaces
  • $ - 字符串结束。