Angular表单验证中自定义校验器不生效怎么办？

兄弟，你的正则写错了。看这行：const hasNumber = /d/.test(value);

你写的是 /d/，这是匹配字面量字符 d，不是匹配数字啊！数字的正则是 /d/ 或者 /[0-9]/。

所以 hasNumber 永远是 false，密码里有数字也检测不到。

但你说返回的是 null，这还有个问题——你是什么时候打印的 errors？如果是刚打开页面就打印，控件值是空字符串 ''，你的校验器里 if (!value) return null; 直接就返回 null 了，根本不会往下执行。

你得输入点东西之后再打印才能看到效果。

修复很简单，把正则改一下就行：

const hasNumber = /d/.test(value);

顺便提一嘴，如果你想密码为空时不显示 weakPassword 错误，只在有值但强度不够时才报错，可以改成这样：

if (!value) return null;

const hasUpperCase = /[A-Z]/.test(value);

const hasLowerCase = /[a-z]/.test(value);

const hasNumber = /d/.test(value);

const isValid = hasUpperCase && hasLowerCase && hasNumber && value.length >= 8;

return isValid ? null : { weakPassword: true };

这样逻辑清晰一点。输入框blur或者值变化后errors就有值了，不信试试。

看到你的问题了兄弟，这个 bug 藏得挺深的。

问题出在你的正则表达式这里：

const hasNumber = /d/.test(value);  // 这是错的！

/d/ 这个写法是在匹配字面字符 "d"，而不是数字。你应该写成 /d/（需要转义）。

由于这个错误，hasNumber 几乎永远是 false（除非密码里恰好有个字母 d），导致你的验证逻辑实际上是这样的：

const isValid = hasUpperCase && hasLowerCase && false && value.length >= 8;

// isValid 永远是 false



return isValid ? null : { weakPassword: true };  

// 应该返回 { weakPassword: true } 才对

等等，按这个逻辑你应该看到 errors 才对...但你说一直是 null。

我再看一下哈，你确定控制台打印的不是初始值 null？在你输入任何字符之前，校验器里这段代码会直接返回 null：

if (!value) return null;

所以你需要在表单里先输入点东西，验证器才会真正跑起来。

修复后的代码：

import { AbstractControl, ValidationErrors } from '@angular/forms';



export function strongPasswordValidator(control: AbstractControl): ValidationErrors | null {

  const value = control?.value;

  

  // 空值时不验证，让 required 校验器来处理

  if (!value) {

    return null;

  }

  

  const hasUpperCase = /[A-Z]/.test(value);

  const hasLowerCase = /[a-z]/.test(value);

  const hasNumber = /d/.test(value);  // 这里是关键：需要反斜杠

  const hasMinLength = value.length >= 8;

  

  // 全部满足才返回 null（验证通过），否则返回错误对象

  const isValid = hasUpperCase && hasLowerCase && hasNumber && hasMinLength;

  

  return isValid ? null : { weakPassword: true };

}

排查步骤：

先确保你的表单控件确实有值，然后在输入后检查一下。可以在组件里这样调试：

ngOnInit() {

  this.form = this.fb.group({

    password: ['', [Validators.required, strongPasswordValidator]]

  });

  

  // 监听值变化，看看验证器有没有返回错误

  this.form.get('password')?.valueChanges.subscribe(value => {

    console.log('当前值:', value);

    console.log('errors:', this.form.get('password')?.errors);

  });

}

如果输入了符合要求的密码（8位以上、有大写、有小写、有数字）后 errors 变成 null，那就说明验证通过了。如果输入了不符合要求的密码，errors 应该变成 { weakPassword: true }。

你先改一下正则，把 /d/ 改成 /d/，试试看能不能解决。