Angular 5表单自定义验证异常：仅触发长度校验，空格校验未生效

嘿，我看了你的代码，问题出在校验函数的执行逻辑和空格校验的正则表达式上，这两个点导致空格校验要么没机会执行，要么执行了也不符合你的需求。

核心问题分析 #

你的校验函数里，第一个if判断如果不满足最小6字符的要求，就直接return { 'minimumSix': true }了——这会让函数直接终止，后面的空格校验代码完全不会运行！另外，你用的空格校验正则^\\s+$只会匹配全是空格的情况，但你的需求是禁止包含任何空格（不管是开头、中间还是结尾），这个正则也不符合要求。

修复后的校验函数 #

把校验逻辑改成收集所有错误，而不是遇到一个就返回，同时修正空格校验的正则：

test(control: any) {
  const errors: { [key: string]: boolean } = {};
  const value = control.value?.trim() || ''; // 处理空值避免报错

  // 校验最少6个字符
  const minimumSixRegex = /^[a-zA-Z0-9!@#$%^&*]{6,}$/;
  if (!minimumSixRegex.test(value)) {
    errors.minimumSix = true;
  }

  // 校验禁止包含任何空格
  const hasSpace = /\s/.test(value);
  if (hasSpace) {
    errors.blankSpace = true;
    console.log("输入包含空格");
  }

  // 有错误则返回错误对象，否则返回null
  return Object.keys(errors).length > 0 ? errors : null;
}

关键改动说明 #

• 收集所有错误：先创建空的错误对象，把所有不符合条件的校验项都加入进去，最后统一返回。这样不管是长度不够还是包含空格，所有错误都会被捕获并显示。
• 修正空格正则：用/\s/匹配任何空白字符（空格、制表符等），只要输入里包含空格就会触发错误，完全符合你"禁止包含空格"的需求。
• 空值处理：加入control.value?.trim() || ''处理输入为空的情况，避免null或undefined导致正则校验报错。

额外优化建议 #

你可以在组件类里定义一个getter简化表单控件的获取，让模板代码更简洁：

get usernameControl() {
  return this.form.get('accountDetails.username');
}

然后模板里就可以用usernameControl代替重复的form.get('accountDetails.username')：

<input type="text" class="form-control" id="account-details-username" placeholder="" formControlName="username">
<div *ngIf="usernameControl.touched && usernameControl.invalid" class="alert alert-danger">
  <div *ngIf="usernameControl.errors.required">Username is required.</div>
  <div *ngIf="usernameControl.errors.minimumSix">Username must contain at least 6 characters</div>
  <div *ngIf="usernameControl.errors.blankSpace">Username cannot contain blank spaces.</div>
</div>

这样修改后，两个自定义校验就都会正常触发啦！

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