如何在Angular中对IPv4地址进行验证与掩码处理？

嘿，这个问题我刚好处理过！在Angular里实现IPv4的验证和输入掩码完全不需要依赖第三方组件，自己动手就能轻松搞定，下面分两部分给你详细说明：

一、IPv4地址验证 #

Angular的表单系统支持自定义验证器，我们可以写一个专门的验证函数来判断输入是否符合IPv4格式：

1. 响应式表单实现 #

先写一个自定义验证器函数，用正则表达式匹配标准IPv4地址：

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

// 自定义IPv4验证器
export function validateIPv4(): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    // 匹配0-255的四段数字，用点分隔
    const ipv4Pattern = /^(?:(?: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]?)$/;
    const isIpValid = ipv4Pattern.test(control.value?.trim() || '');
    return isIpValid ? null : { invalidIPv4: '请输入有效的IPv4地址' };
  };
}

然后在组件的响应式表单中使用这个验证器：

import { FormBuilder, FormGroup } from '@angular/forms';
import { validateIPv4 } from './validators/ipv4.validator';

@Component({
  selector: 'app-ipv4-input',
  templateUrl: './ipv4-input.component.html'
})
export class Ipv4InputComponent {
  ipv4Form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.ipv4Form = this.fb.group({
      ipAddress: ['', [validateIPv4()]]
    });
  }
}

对应的模板代码：

<form [formGroup]="ipv4Form" class="ipv4-form">
  <label for="ipAddress">IPv4地址：</label>
  <input 
    type="text" 
    id="ipAddress"
    formControlName="ipAddress" 
    placeholder="例如：192.168.1.1"
  >
  <!-- 显示错误提示 -->
  <div 
    *ngIf="ipv4Form.get('ipAddress')?.invalid && ipv4Form.get('ipAddress')?.touched"
    class="error-message"
  >
    {{ ipv4Form.get('ipAddress')?.errors?.invalidIPv4 }}
  </div>
</form>

2. 模板驱动表单实现 #

如果用模板驱动表单，可以把验证器封装成指令：

import { Directive } from '@angular/core';
import { NG_VALIDATORS, AbstractControl, ValidationErrors, Validator } from '@angular/forms';
import { validateIPv4 } from './validators/ipv4.validator';

@Directive({
  selector: '[appIpv4Validator]',
  providers: [{ 
    provide: NG_VALIDATORS, 
    useExisting: Ipv4ValidatorDirective, 
    multi: true 
  }]
})
export class Ipv4ValidatorDirective implements Validator {
  validate(control: AbstractControl): ValidationErrors | null {
    return validateIPv4()(control);
  }
}

模板里直接使用指令：

<label for="ipInput">IPv4地址：</label>
<input 
  type="text" 
  id="ipInput"
  [(ngModel)]="ipValue" 
  appIpv4Validator
  #ipInput="ngModel"
  placeholder="例如：192.168.1.1"
>
<div 
  *ngIf="ipInput.invalid && ipInput.touched"
  class="error-message"
>
  请输入有效的IPv4地址
</div>

二、IPv4输入掩码处理 #

掩码功能可以通过监听输入事件，自动格式化输入内容，比如自动插入点号、限制每段数字不超过255：

组件代码：

import { Component } from '@angular/core';

@Component({
  selector: 'app-ipv4-input',
  templateUrl: './ipv4-input.component.html'
})
export class Ipv4InputComponent {
  ipValue = '';

  handleIpInput(event: Event) {
    const inputElement = event.target as HTMLInputElement;
    let rawValue = inputElement.value.replace(/[^0-9]/g, ''); // 过滤非数字字符
    const segments: string[] = [];

    // 分割为最多4段，每段不超过3位且不大于255
    while (rawValue.length > 0 && segments.length < 4) {
      let segment = rawValue.slice(0, 3);
      // 如果当前段超过255，只保留前两位（比如输入256时，自动截断为25）
      if (parseInt(segment) > 255) {
        segment = segment.slice(0, 2);
      }
      segments.push(segment);
      rawValue = rawValue.slice(segment.length);
    }

    // 拼接成带点号的格式
    this.ipValue = segments.join('.');
    inputElement.value = this.ipValue;
  }
}

模板代码：

<input 
  type="text" 
  [(ngModel)]="ipValue" 
  (input)="handleIpInput($event)"
  placeholder="输入IPv4地址"
>

这个掩码实现会自动帮用户格式化输入，比如输入19216811会变成192.168.1.1，输入256会自动截断为25，避免无效输入。

最后 #

把验证器和掩码功能结合起来，就能得到一个体验良好的IPv4输入组件了，完全不需要依赖第三方库，灵活性还更高，可以根据自己的需求调整细节~

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