模式验证器对IP地址正则表达式无效

Question

我使用以下正则表达式验证IP address pattern：

/\b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\b/

我也在regex tester中检查了它，它运行正常。

但是，当我在模式验证器中使用它时，有效的IP地址（例如：128.129.80.66）不会被识别为有效。

app.component.ts：

export class AppComponent implements OnInit {

      testForm: FormGroup;
      constructor(private fb: FormBuilder) {}

      ngOnInit(): void {
        const ipPattern = 
        '/\b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\b/';
        this.testForm = this.fb.group({
          inp: ['128.129.80.66', Validators.pattern(ipPattern)]
        });
      }
    }

app.component.html

<form novalidate [formGroup]="testForm">
  <input formControlName="inp"/>
  {{testForm.status}}
</form>

结果：

此代码有什么问题？

Answer 1

由于您使用的是Validators.pattern，因此您无需手动锚定图案（不需要字边界，角度将自动包围整个图案^和$）并且你需要用一个字符串文字来正确定义它，使转义的反斜杠加倍，否则它们将被JS删除。

使用

const ipPattern = 
    "(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)";

您可以在开头添加^，在结尾添加$，以防您希望保持模式的显式（在{2}处有两个^不会造成任何伤害模式开始和最后$$，只需引擎检查字符串位置的开始/结束两次）。

注意：如果你有更复杂的模式和替换，最好在这些模式中明确使用^和$，因为角度自动锚定不会包含使用可选的非捕获组的整个模式，它只是将^和$附加到提供的模式。