Angular 端口校验：使用 Validators.pattern 验证输入

可以使用 Angular 内置的 Validators.pattern 方法来校验输入内容是否是端口，如下所示：

import { Component } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-port-validation',
  template: `
    <form [formGroup]="portForm">
      <input type="text" formControlName="port">
      <div *ngIf="port.hasError('pattern')">
        Please enter a valid port number (1-65535).
      </div>
    </form>
  `,
})
export class PortValidationComponent {
  portForm = new FormGroup({
    port: new FormControl('', [Validators.required, Validators.pattern('^[1-9]\d{0,3}$|^[1-5]\d{4}$|^[6][0-4]\d{3}$|^65[0-4]\d{2}$|^655[0-2]\d$|^6553[0-5]$')]),
  });

  get port() {
    return this.portForm.get('port');
  }
}

以上代码中，我们使用了 Validators 中的 pattern 方法，并传入一个正则表达式，该正则表达式用于匹配输入内容是否是端口。如果输入内容不是端口，则会显示错误信息。

正则表达式解释：

该正则表达式匹配 1 到 65535 之间的整数。它使用了一系列的或运算符 (|) 来匹配不同的数字范围，例如：

^[1-9]\d{0,3}$: 匹配 1 到 999 之间的整数。
^[1-5]\d{4}$: 匹配 1000 到 5999 之间的整数。
^[6][0-4]\d{3}$: 匹配 6000 到 6499 之间的整数。
^65[0-4]\d{2}$: 匹配 6500 到 6549 之间的整数。
^655[0-2]\d$: 匹配 6550 到 6552 之间的整数。
^6553[0-5]$: 匹配 65530 到 65535 之间的整数。

总结

通过使用 Validators.pattern 方法和一个匹配端口范围的正则表达式，我们可以有效地校验输入内容是否为有效的端口号，提高应用程序的可靠性和安全性。