求Angular应用中符合指定规则的密码正则表达式

Hey there! Let's build the exact regex you need for your Angular app's password validation. Based on your requirements—8-30 characters, at least one uppercase, one lowercase, one number, one special character, and only allowed characters (letters, numbers, special chars)—here's a robust solution:

The Regex #

^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=\[\]{}|;:'",.<>?])[a-zA-Z\d!@#$%^&*()_+\-=\[\]{}|;:'",.<>?]{8,30}$

Breakdown of Each Part #

Let's break this down so you understand exactly what each piece does:

• ^ & $: Anchors the regex to match the entire password string (no extra characters before/after allowed)
• (?=.*[a-z]): Positive lookahead to ensure at least one lowercase letter exists
• (?=.*[A-Z]): Positive lookahead to ensure at least one uppercase letter exists
• (?=.*\d): Positive lookahead to ensure at least one number exists
• (?=.*[!@#$%^&*()_+\-=\[\]{}|;:'",.<>?]): Positive lookahead to ensure at least one special character from the specified set exists (adjust this set if you need to add/remove allowed special chars)
• [a-zA-Z\d!@#$%^&*()_+\-=\[\]{}|;:'",.<>?]{8,30}: Matches only the allowed characters (letters, numbers, approved special chars) and enforces the 8-30 character length limit

How to Use This in Angular #

For Reactive Forms #

In your component file:

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-password-form',
  templateUrl: './password-form.component.html'
})
export class PasswordFormComponent {
  passwordForm: FormGroup;
  // Define the regex as a class property
  passwordValidationRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=\[\]{}|;:'",.<>?])[a-zA-Z\d!@#$%^&*()_+\-=\[\]{}|;:'",.<>?]{8,30}$/;

  constructor(private fb: FormBuilder) {
    this.passwordForm = this.fb.group({
      password: ['', [
        Validators.required,
        Validators.pattern(this.passwordValidationRegex)
      ]]
    });
  }
}

In your template file (password-form.component.html):

<form [formGroup]="passwordForm">
  <label for="password">Password:</label>
  <input type="password" id="password" formControlName="password">
  
  <!-- Show error message if pattern validation fails -->
  <div *ngIf="passwordForm.get('password')?.invalid && passwordForm.get('password')?.touched">
    <span *ngIf="passwordForm.get('password')?.hasError('pattern')">
      Password must be 8-30 characters long, include at least one uppercase letter, one lowercase letter, one number, and one special character. Only letters, numbers, and special characters like !@#$%^&*() are allowed.
    </span>
    <span *ngIf="passwordForm.get('password')?.hasError('required')">
      Password is required.
    </span>
  </div>
</form>

For Template-Driven Forms #

If you're using template-driven forms, you can define the regex directly in the template:

<form #passwordForm="ngForm">
  <label for="password">Password:</label>
  <input 
    type="password" 
    id="password" 
    name="password" 
    ngModel 
    required
    pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=\[\]{}|;:'\",.<>?])[a-zA-Z\d!@#$%^&*()_+\-=\[\]{}|;:'\",.<>?]{8,30}$"
    #password="ngModel"
  >
  
  <div *ngIf="password.invalid && password.touched">
    <span *ngIf="password.hasError('pattern')">
      Password must be 8-30 characters long, include at least one uppercase letter, one lowercase letter, one number, and one special character. Only letters, numbers, and approved special characters are allowed.
    </span>
    <span *ngIf="password.hasError('required')">
      Password is required.
    </span>
  </div>
</form>

Customizing Special Characters #

If you need to adjust the allowed special characters, simply modify the two instances of the special character set in the regex. For example, if you want to allow ~ and ^, add them to both sets:

^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=\[\]{}|;:'",.<>?~^])[a-zA-Z\d!@#$%^&*()_+\-=\[\]{}|;:'",.<>?~^]{8,30}$

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