Angular 2简易表单验证：用户名密码及自定义密码校验实现方法

没问题，我来一步步教你实现这个Angular 2的表单和自定义密码验证～

1. 先配置模块（确保导入响应式表单模块） #

首先在你的组件所属的NgModule里导入ReactiveFormsModule，这是使用响应式表单的基础：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms'; // 必须导入这个模块
import { LoginFormComponent } from './login-form.component';

@NgModule({
  imports: [BrowserModule, ReactiveFormsModule], // 添加到imports数组
  declarations: [LoginFormComponent],
  bootstrap: [LoginFormComponent]
})
export class AppModule { }

2. 组件类中实现表单和自定义验证器 #

在组件的.ts文件里，我们要构建表单组，同时编写满足你需求的密码自定义验证函数：

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

@Component({
  selector: 'app-login-form',
  templateUrl: './login-form.component.html',
  styleUrls: ['./login-form.component.css']
})
export class LoginFormComponent {
  loginForm: FormGroup;

  constructor(private fb: FormBuilder) {
    // 初始化表单，给用户名和密码设置验证规则
    this.loginForm = this.fb.group({
      username: ['', [Validators.required, Validators.minLength(3)]], // 用户名必填，至少3位
      password: ['', [
        Validators.required,
        this.passwordValidator // 应用我们的自定义密码验证器
      ]]
    });
  }

  // 自定义密码验证器核心逻辑
  passwordValidator(control: AbstractControl): ValidationErrors | null {
    const password = control.value;
    if (!password) {
      return null; // 空值的情况交给required验证处理，这里不用额外判断
    }

    // 定义所有需要满足的规则：正则表达式 + 对应的错误标识
    const validationRules = [
      { regex: /[A-Z]/, errorKey: 'missingUppercase' }, // 至少1个大写字母
      { regex: /[a-z]/, errorKey: 'missingLowercase' }, // 至少1个小写字母
      { regex: /[0-9]/, errorKey: 'missingNumber' }, // 至少1个数字
      { regex: /[!@#$%^&*(),.?":{}|<>]/, errorKey: 'missingSpecialChar' }, // 至少1个特殊字符
      { regex: /^.{8,16}$/, errorKey: 'invalidLength' } // 长度在8-16位之间
    ];

    // 遍历规则，收集所有不满足的错误
    const errors: ValidationErrors = {};
    validationRules.forEach(rule => {
      if (!rule.regex.test(password)) {
        errors[rule.errorKey] = true;
      }
    });

    // 有错误就返回错误对象，没有就返回null（表示验证通过）
    return Object.keys(errors).length > 0 ? errors : null;
  }

  // 表单提交方法
  onSubmit() {
    if (this.loginForm.valid) {
      console.log('表单提交成功:', this.loginForm.value);
      // 这里可以写你的实际提交逻辑，比如调用后端接口
    } else {
      // 标记所有字段为已触碰，触发错误提示显示
      this.loginForm.markAllAsTouched();
    }
  }
}

3. 编写模板（HTML部分） #

在组件的.html文件里，我们要渲染表单、绑定控件，并根据验证状态显示对应的错误提示：

<form [formGroup]="loginForm" (ngSubmit)="onSubmit()" class="login-form">
  <div class="form-group">
    <label for="username">用户名:</label>
    <input 
      type="text" 
      id="username" 
      formControlName="username" 
      class="form-control"
      placeholder="请输入用户名"
    >
    <!-- 用户名错误提示 -->
    <div *ngIf="loginForm.get('username')?.invalid && loginForm.get('username')?.touched" class="error-text">
      <span *ngIf="loginForm.get('username')?.errors?.['required']">用户名不能为空</span>
      <span *ngIf="loginForm.get('username')?.errors?.['minlength']">用户名至少需要3个字符</span>
    </div>
  </div>

  <div class="form-group">
    <label for="password">密码:</label>
    <input 
      type="password" 
      id="password" 
      formControlName="password" 
      class="form-control"
      placeholder="请输入密码"
    >
    <!-- 密码错误提示 -->
    <div *ngIf="loginForm.get('password')?.invalid && loginForm.get('password')?.touched" class="error-text">
      <span *ngIf="loginForm.get('password')?.errors?.['required']">密码不能为空</span>
      <span *ngIf="loginForm.get('password')?.errors?.['invalidLength']">密码长度必须在8-16位之间</span>
      <span *ngIf="loginForm.get('password')?.errors?.['missingUppercase']">密码必须包含至少一个大写字母</span>
      <span *ngIf="loginForm.get('password')?.errors?.['missingLowercase']">密码必须包含至少一个小写字母</span>
      <span *ngIf="loginForm.get('password')?.errors?.['missingNumber']">密码必须包含至少一个数字</span>
      <span *ngIf="loginForm.get('password')?.errors?.['missingSpecialChar']">密码必须包含至少一个特殊字符（如!@#$%等）</span>
    </div>
  </div>

  <button type="submit" [disabled]="loginForm.invalid" class="submit-btn">提交</button>
</form>

4. 可选：添加基础样式（CSS部分） #

为了让表单更美观友好，可以加一些简单的样式：

.login-form {
  max-width: 400px;
  margin: 2rem auto;
  padding: 2rem;
  border: 1px solid #eee;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.form-group {
  margin-bottom: 1.5rem;
}

label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: #333;
}

.form-control {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
  transition: border-color 0.2s;
}

.form-control.ng-invalid.ng-touched {
  border-color: #dc3545;
}

.error-text {
  margin-top: 0.5rem;
  color: #dc3545;
  font-size: 0.875rem;
  line-height: 1.5;
}

.submit-btn {
  width: 100%;
  padding: 0.75rem;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

.submit-btn:hover:not(:disabled) {
  background-color: #0056b3;
}

.submit-btn:disabled {
  background-color: #6c757d;
  cursor: not-allowed;
}

关键说明 #

• 自定义验证器passwordValidator是核心，它通过正则表达式逐一检查密码的各个规则，返回对应的错误标识，Angular会自动关联这些错误到表单控件上。
• 模板中通过*ngIf判断控件是否无效且已被触碰，避免页面刚加载就显示错误提示，提升用户体验。
• 提交按钮通过[disabled]="loginForm.invalid"控制可用性，确保只有表单完全合法时才能提交。

这样整个表单就完全符合你的需求啦～

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