使用 Angular 自定义电子邮件验证

Question

我正在尝试实现自定义角度函数来验证电子邮件地址， 一切都很好，除了当我输入 example@mail 时，验证不起作用，它认为电子邮件的地址是有效的

验证器.ts

  static emailsLenghtAndFormat(control: AbstractControl): ValidationErrors | null {
    const email = control.value;
    const responseKo = { invalid: true };
    const responseOk = null;
    const responseKoMaxLength = { maxlength: true };

    if (!email) {
      return responseOk;
    }

    if (email.length > 100) {
      return responseKoMaxLength;
    }

    const EMAIL_REGEXP = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;

    if (email !== '' && (email.length <= 5 || !EMAIL_REGEXP.test(email))) {
      return responseKo;
    }

    return responseOk;
  }

authent.ts

      this.formAuthentification = this.fb.group({
        authentification: this.fb.group(
          {
            email: ['', [Validators.required, Validators.email, Validators.maxLength(100)]],
            password: ['', Validators.required],
          },

        {
          validator: [ValidatorsCustom.emailsLenghtAndFormat]
        }
        )
      });

Answer 1

您正在检查整个表单组。在这种情况下，您的输入不是 AbstractControl，而是一个表单组。然后它将字符串化您的表单组并尝试在整个字符串化的表单组中找到正则表达式。

static emailsLenghtAndFormat(group: FormGroup): ValidationErrors | null {
    const email = group.get('email').value;
    const responseKo = { invalid: true };
    const responseOk = null;
    const responseKoMaxLength = { maxlength: true };

    if (!email) {
      return responseOk;
    }

    if (email.length > 100) {
      return responseKoMaxLength;
    }

    const EMAIL_REGEXP = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;

    if (email !== '' && (email.length <= 5 || !EMAIL_REGEXP.test(email))) {
      return responseKo;
    }

    return responseOk;
  }