Ionic 3 注册表单密码确认一致性验证技术问询

我来帮你搞定这个密码确认的需求！在Ionic 3里，我们可以通过自定义表单验证器来实现两次密码输入一致的校验，下面是完整的实现步骤和代码：

1. 编写自定义密码匹配验证器 #

首先在你的组件类里添加一个自定义验证函数，它会接收整个表单组作为参数，对比password1和password2的值：

// 自定义密码匹配验证器
passwordMatchValidator(formGroup: FormGroup) {
  const password1 = formGroup.get('password1').value;
  const password2 = formGroup.get('password2').value;
  // 如果两次密码一致返回null（验证通过），否则返回错误对象
  return password1 === password2 ? null : { passwordMismatch: true };
}

2. 完善表单构建代码 #

接下来把这个验证器绑定到你的注册表单组上，同时补全password1的验证规则（比如添加必填和最小长度）：

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

@Component({
  selector: 'page-registration',
  templateUrl: 'registration.html'
})
export class RegistrationPage {
  public registration: FormGroup;

  constructor(private formBuilder: FormBuilder) {
    this.registration = this.formBuilder.group({
      username: ['', Validators.compose([
        Validators.pattern('^(?=.*[a-zA-Z])(?=.*[0-9])[a-zA-Z0-9]+$'),
        Validators.required
      ])],
      email: ['', Validators.compose([
        Validators.email,
        Validators.required
      ])],
      password1: ['', Validators.compose([
        Validators.required,
        Validators.minLength(6) // 可选：添加密码最小长度限制
      ])],
      password2: ['', Validators.required]
    }, { validator: this.passwordMatchValidator }); // 将自定义验证器绑定到表单组
  }

  // 自定义密码匹配验证器
  passwordMatchValidator(formGroup: FormGroup) {
    const password1 = formGroup.get('password1').value;
    const password2 = formGroup.get('password2').value;
    return password1 === password2 ? null : { passwordMismatch: true };
  }

  // 表单提交方法
  onSubmit() {
    if (this.registration.valid) {
      console.log('表单验证通过，提交数据:', this.registration.value);
      // 这里写你的注册逻辑
    }
  }
}

3. 模板中添加错误提示 #

在对应的HTML模板里，我们需要添加密码不匹配的错误提示，让用户知道哪里出了问题：

<ion-content padding>
  <form [formGroup]="registration" (ngSubmit)="onSubmit()">
    <!-- 用户名输入框 -->
    <ion-item>
      <ion-label>用户名</ion-label>
      <ion-input type="text" formControlName="username"></ion-input>
    </ion-item>
    <div class="error-message" *ngIf="registration.get('username').invalid && registration.get('username').touched">
      <p *ngIf="registration.get('username').errors.required">用户名不能为空</p>
      <p *ngIf="registration.get('username').errors.pattern">用户名必须包含字母和数字</p>
    </div>

    <!-- 邮箱输入框 -->
    <ion-item>
      <ion-label>邮箱</ion-label>
      <ion-input type="email" formControlName="email"></ion-input>
    </ion-item>
    <div class="error-message" *ngIf="registration.get('email').invalid && registration.get('email').touched">
      <p *ngIf="registration.get('email').errors.required">邮箱不能为空</p>
      <p *ngIf="registration.get('email').errors.email">请输入有效的邮箱地址</p>
    </div>

    <!-- 密码输入框 -->
    <ion-item>
      <ion-label>设置密码</ion-label>
      <ion-input type="password" formControlName="password1"></ion-input>
    </ion-item>
    <div class="error-message" *ngIf="registration.get('password1').invalid && registration.get('password1').touched">
      <p *ngIf="registration.get('password1').errors.required">密码不能为空</p>
      <p *ngIf="registration.get('password1').errors.minlength">密码长度不能少于6位</p>
    </div>

    <!-- 确认密码输入框 -->
    <ion-item>
      <ion-label>确认密码</ion-label>
      <ion-input type="password" formControlName="password2"></ion-input>
    </ion-item>
    <div class="error-message" *ngIf="registration.get('password2').invalid && registration.get('password2').touched">
      <p *ngIf="registration.get('password2').errors.required">确认密码不能为空</p>
    </div>

    <!-- 密码不匹配提示 -->
    <div class="error-message" *ngIf="registration.errors?.passwordMismatch && registration.get('password2').touched">
      <p>两次输入的密码不一致，请重新输入</p>
    </div>

    <!-- 注册按钮 -->
    <button ion-button block type="submit" [disabled]="registration.invalid">完成注册</button>
  </form>
</ion-content>

关键说明 #

• 自定义验证器是绑定在整个表单组上的，这样才能同时获取到两个密码字段的值进行对比。
• 错误提示会在用户触摸过输入框后才显示，避免页面加载时就出现一堆错误信息，提升用户体验。
• 可以根据需求调整密码的验证规则，比如添加大写字母、特殊字符的要求，只需要修改password1的Validators.pattern即可。

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