Angular表单控件验证需求：仅允许3个单词间含2个点

要实现这个验证规则，你可以创建一个自定义表单验证器，结合正则表达式精准匹配格式要求。以下是完整实现步骤：

1. 编写自定义验证器函数 #

创建独立的验证器函数，用于检查输入值是否符合[单词].[单词].[单词]的格式：

import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';

export function threeSegmentDotValidator(): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    // 空值时不触发验证（如需强制必填，可搭配Validators.required使用）
    if (!control.value) return null;

    // 正则规则：匹配3段由点分隔的单词（支持字母、数字，可按需调整字符范围）
    const formatRegex = /^[a-zA-Z0-9]+(\.[a-zA-Z0-9]+){2}$/;
    return formatRegex.test(control.value) ? null : { invalidSegmentFormat: true };
  };
}

正则说明： #

• ^[a-zA-Z0-9]+：匹配第一段单词（至少1个字母/数字）
• (\.[a-zA-Z0-9]+){2}：强制匹配恰好2个「点+单词」结构，确保总共有3段内容
• $：匹配字符串结尾，避免输入多余字符

如果需要允许下划线、连字符等特殊字符，可将正则中的[a-zA-Z0-9]修改为[a-zA-Z0-9_-]这类符合业务需求的字符集。

2. 在表单中应用验证器 #

以响应式表单为例，在组件中引入并使用该验证器：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { threeSegmentDotValidator } from './path-to-your-validator';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.myForm = this.fb.group({
      targetField: [
        '',
        [Validators.required, threeSegmentDotValidator()] // 结合必填验证
      ]
    });
  }
}

3. 模板中显示错误提示 #

在模板里根据验证错误状态，给用户展示对应的提示信息：

<form [formGroup]="myForm" class="example-form">
  <label>
    输入内容：
    <input type="text" formControlName="targetField">
  </label>

  <!-- 格式错误提示 -->
  <div *ngIf="myForm.get('targetField')?.hasError('invalidSegmentFormat')" class="error-message">
    请输入由2个点分隔的3段内容，例如：san.sa.sa
  </div>

  <!-- 必填错误提示 -->
  <div *ngIf="myForm.get('targetField')?.hasError('required')" class="error-message">
    此字段不能为空
  </div>
</form>

这样就能确保输入框仅接受符合要求的格式内容。

内容的提问来源于stack exchange，提问作者Sandhya Rani