JavaScript RegExp For Phone number validation that need to allow hyphens and space in the numbers

Question

App.component.html

<form [formGroup]="exampleForm">
       <div class="form-group">
         <label>First Name</label>
       <input type="text" formControlName="phoneNumber" class="form-control" >
      </div>
  </form>

App.component.ts

exampleForm: FormGroup;
   number_pattern=' ^[0-9_-]*$ ';

    constructor(private formBuilder: FormBuilder) { }

    ngOnInit() {
        this.exampleForm = this.formBuilder.group({
            phoneNumber: ['', Validators.required, Validators.pattern(number_pattern)]
        });
    }

我需要 phone 的正则表达式并遵循以下规则，我尝试了正则表达式代码但它不起作用。

字段不能为空。
连字符和 space 将在数字之间接受，而不是开始和结束。
不得包含除数字或空白 space 或连字符
字段不能只包含空白 space
字段不能只包含连字符
字段不能只包含连字符和空白 space。

提前致谢。

Answer 1

尝试以下模式：

^\d([0-9 -]{0,10}\d)?$

console.log(/^\d([0-9 -]{0,10}\d)?$/.test('123'));             // pass
console.log(/^\d([0-9 -]{0,10}\d)?$/.test('1-2 3'));           // pass
console.log(/^\d([0-9 -]{0,10}\d)?$/.test('1-2-3-4-5-6'));     // pass
console.log(/^\d([0-9 -]{0,10}\d)?$/.test('1-2-3-4-5-6-'));    // fail
console.log(/^\d([0-9 -]{0,10}\d)?$/.test('123456789012'));    // pass
console.log(/^\d([0-9 -]{0,10}\d)?$/.test('1234567890123'));   // fail
console.log(/^\d([0-9 -]{0,10}\d)?$/.test('- --'));            // fail

上面三个失败的例子是因为：

1-2-3-4-5-6- 以连字符结尾，而不是数字
1234567890123有13位，太长了
--- 仅包含连字符和空格

Answer 2

以下正则表达式应该可以满足您的要求：

^(?=.*(?:(?:\d[ -]?){1,12}))\d(?:[0-9 -]*\d)?$

解释：

^ = 从头开始

(?=.* 向前查找零个或多个后跟的任意字符：

(?: 开始一个非捕获组

\d[-]?一个数字后跟可选的 Space 或连字符

{1,12} 匹配其中的 1 到 12 个数字

\d匹配一个数字

(?: 开始一个新的非捕获组

[0-9 -]*\d 一个数字或一个 Space 或一个连字符（零个或多个）后跟一个数字

? 使组可选

$匹配字符串结尾

这将匹配最多 12 个 numbers（+ Space 和连字符）的字符串。

JavaScript RegExp For Phone number validation that need to allow hyphens and space in the numbers

JavaScript RegExp For Phone number validation that need to allowing hyphens and space in between the numbers

javascript

regex

phone-number

angular-reactive-forms