Angular响应式表单正则表达式需求：禁纯特殊字符，允特殊字符配字母/数字

当前表单验证规则完全禁止特殊字符，需修改正则表达式实现允许特殊字符与字母/数字组合输入，但禁止仅输入特殊字符的需求。

修改步骤 #

1. 更新用户名验证正则 #

在app.component.ts中，替换username字段的Validators.pattern为以下规则：

Validators.pattern(
  '^(?=.*[\\u0621-\\u064A\\u0660-\\u0669a-zA-Z0-9])[\\u0621-\\u064A\\u0660-\\u0669a-zA-Z0-9@#$%^&*_\\-\\s]+$'
)

规则说明：

• (?=.*[\u0621-\u064A\u0660-\u0669a-zA-Z0-9])：强制输入至少包含一个阿拉伯字母、英文或数字
• [\u0621-\u064A\u0660-\u0669a-zA-Z0-9@#$%^&*_\\-\\s]+：允许输入阿拉伯字母、英文、数字、空格、下划线及常见特殊字符（@#$%^&*-）

2. 修正错误提示文本 #

在app.component.html中，将用户名的pattern错误提示改为准确描述：

<span
  *ngIf="SignupForm.get('userData.username').errors['pattern']"
  >用户名不能仅包含特殊字符，必须包含至少一个字母或数字</span
>

修改后的完整代码 #

app.component.ts #

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators, FormArray } from '@angular/forms';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  genders = ['male', 'female'];
  SignupForm: FormGroup;
  // forbiddenUserNames=['geetha','puja'];

  ngOnInit() {
    this.SignupForm = new FormGroup({
      userData: new FormGroup({
        username: new FormControl('', [
          Validators.required,
          Validators.pattern(
            '^(?=.*[\\u0621-\\u064A\\u0660-\\u0669a-zA-Z0-9])[\\u0621-\\u064A\\u0660-\\u0669a-zA-Z0-9@#$%^&*_\\-\\s]+$'
          ),
        ]),
        email: new FormControl(
          null,
          [Validators.required, Validators.email],
          this.forbiddenEmails
        ),
      }),
      gender: new FormControl('female'),
      hobbies: new FormArray([]),
    });

    this.SignupForm.setValue({
      userData: {
        username: 'geetha',
        email: 'geetha@gmail.com',
      },
      gender: 'female',
      hobbies: [],
    });
  }

  onSubmit() {
    console.log(this.SignupForm);
  }

  onAddHobby() {
    const control = new FormControl(null, Validators.required);
    (<FormArray>this.SignupForm.get('hobbies')).push(control);
  }

  forbiddenNames(control: FormControl): { [s: string]: boolean } {
    if (this.forbiddenUserNames?.indexOf(control.value) != -1) {
      return { nameisForbidden: true };
    }

    return null;
  }

  forbiddenEmails(control: FormControl): Promise<any> | Observable<any> {
    const promise = new Promise<any>((resolve, reject) => {
      setTimeout(() => {
        if (control.value === 'test@test.com') {
          resolve({ emailIsForbidden: true });
        } else {
          resolve(null);
        }
      }, 1500);
    });
    return promise;
  }
}

app.component.html #

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-10 col-md-8 col-md-offset-2 col-sm-offset-1">
      <form [formGroup]="SignupForm" (ngSubmit)="onSubmit()">
        <div formGroupName="userData">
          <div class="form-group">
            <label for="username">UserName</label>
            <input
              type="text"
              class="form-control"
              id="username"
              formControlName="username"
            />
            <span
              class="help-block"
              *ngIf="
                !SignupForm.get('userData.username').valid &&
                SignupForm.get('userData.username').touched
              "
            >
              <span
                *ngIf="
                  SignupForm.get('userData.username').errors['nameIsForbidden']
                "
                >name is invalid</span
              >
              <span
                *ngIf="SignupForm.get('userData.username').errors['pattern']"
                >用户名不能仅包含特殊字符，必须包含至少一个字母或数字</span
              >
              <span
                *ngIf="SignupForm.get('userData.username').errors['required']"
                >field is required</span
              >
            </span>
          </div>

          <div class="form-group">
            <label for="email">Email</label>
            <input
              type="email"
              class="form-control"
              id="email"
              formControlName="email"
            />

            <span
              class="help-block"
              *ngIf="
                !SignupForm.get('userData.email').valid &&
                SignupForm.get('userData.email').touched
              "
            >
              please enter a valid email id
            </span>
          </div>
        </div>

        <div class="radio" *ngFor="let gender of genders">
          <label>
            <input type="radio" [value]="gender" formControlName="gender" />{{
              gender
            }}
          </label>
        </div>

        <div formArrayName="hobbies">
          <h4>Hobbies</h4>
          <button class="btn btn-default" type="button" (click)="onAddHobby()">
            Add Hobby
          </button>

          <div
            class="form-group"
            *ngFor="
              let hobbyControl of SignupForm.get('hobbies').controls;
              let i = index
            "
          >
            <input type="text" class="form-control" [formControlName]="i" />
          </div>
        </div>

        <span
          class="help-block"
          *ngIf="!SignupForm.valid && SignupForm.touched"
        >
          please enter valid data
        </span>

        <button class="btn btn-primary" type="submit">Submit</button>
      </form>
    </div>
  </div>
</div>

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