Angular2/4 电话验证

Posted

技术标签:

【中文标题】Angular2/4 电话验证【英文标题】:Angular2/4 Telephone Validation 【发布时间】:2018-03-07 10:10:24 【问题描述】:

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

pattern="^\s*(?:\+?(\d1,3))?[- (]*(\d3)[- )]*(\d3)[- ]*(\d4)(?: *[x/#]1(\d+))?\s*$"

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

    754-3010(本地)

    (541) 754-3010(国内)

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

它应该接受 +、-、( 和 ) 字符。

希望有人能帮忙

【问题讨论】:

【参考方案1】:

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

使用

^\s*(?:\+?\d1,3)?[- (]*\d3(?:[- )]*\d3)?[- ]*\d4(?: *[x/#]\d+)?\s*$
                              ^^^           ^^

见regex demo

注意1是多余的,你可以删除它。

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

详情

^ - 字符串的开头 \s* - 0+ 个空格 (?:\+?\d1,3)? - 可选序列: \+? - 可选(1 或 0)+ 符号 \d1,3 - 任何 1 到 3 位数字 [- (]* - -,空格或( \d3 - 任意 3 位数字 (?:[- )]*\d3)? - 可选序列: [- )]* - 0+ -,空格或) \d3 - 任意 3 位数字 [- ]* - 0+ 个空格或 - \d4 - 任意 4 位数字 (?: *[x/#]\d+)? \s* - 0+ 个空格 $ - 字符串结束。

【讨论】:

很好的解释!非常感谢这个。

以上是关于Angular2/4 电话验证的主要内容,如果未能解决你的问题,请参考以下文章

Angular2/4:实时刷新数据

Angular2/4 mat-select 多个 ngModel

在angular2中使用lodash时出错[重复]

在 Angular 2/4 应用程序上对用户进行身份验证后的动态角色和权限

我可以为所有 angular2/4 项目使用一个 node_module 文件夹吗

Angular2 指令监听父组件回调或更改