Angular输入框验证：禁止仅含空白及特殊字符，求特殊字符验证方案

以下是修改后的完整验证指令代码，同时实现空白字符检查和特殊字符独占检查：

import { Directive } from '@angular/core';
import { NG_VALIDATORS, Validator, ValidationErrors, AbstractControl } from '@angular/forms';

@Directive({
  selector: '[noWhiteSpaceOrSpecialCharsOnly]', 
  providers: [{ provide: NG_VALIDATORS, useExisting: NoWhitespaceOrSpecialCharsOnlyDirective, multi: true }]
})
export class NoWhitespaceOrSpecialCharsOnlyDirective implements Validator {

  constructor() { }

  validate(control: AbstractControl): ValidationErrors | null {
    // 处理空值或全空白的情况
    if (!control.value || control.value.trim() === '') {
      return { required: true };
    }

    // 检查是否仅包含空白字符和特殊字符（非字母/数字）
    const onlySpecialCharsAndWhitespace = /^[\s\W]*$/.test(control.value);
    if (onlySpecialCharsAndWhitespace) {
      return { noOnlySpecialChars: true };
    }

    return null;
  }

}

关键改动说明 #

• 指令命名优化：将选择器和类名改为noWhiteSpaceOrSpecialCharsOnly，更精准反映验证规则
• 正则逻辑：/^[\s\W]*$/ 用于匹配全空白/特殊字符的场景：
  • \s：匹配所有空白字符（空格、制表符、换行等）
  • \W：匹配所有非单词字符（即除字母、数字、下划线外的特殊字符，如!@#$%^&*()等）
  • ^和$：确保整个输入内容都符合规则，而非局部匹配
• 错误返回：新增noOnlySpecialChars错误标识，与原有的required错误区分，方便模板中展示不同提示

模板使用示例 #

<input type="text" formControlName="userInput" noWhiteSpaceOrSpecialCharsOnly>
<div *ngIf="form.get('userInput')?.hasError('required')">
  输入不能为空
</div>
<div *ngIf="form.get('userInput')?.hasError('noOnlySpecialChars')">
  不能仅输入空格或特殊字符，请输入有效内容
</div>

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