簡體   English   中英

在角度驗證電子郵件輸入 - 模式驗證

[英]validating email input in angular - pattern validation

我正在使用模板驅動模式來檢查輸入是否是有效的電子郵件並使用 mat 錯誤來顯示它,但它以某種方式不起作用,我真的不明白為什么,正如您在下面的代碼中看到的那樣,我認為沒有其他方法可以做吧,知道為什么它有效嗎? 謝謝。

無論輸入什么,即使電子郵件格式正確,它也總是紅色,這是為什么呢?

在此處輸入圖像描述

#電子郵件

<mat-form-field appearance="fill" fxFlex="30">
    <mat-label>EMAIL ADDRESS</mat-label>
    <input matInput type="email" pattern="^[a-zA-Z0-9._% -] @[a-zA-Z0-9.-] \.[a-zA-Z]{2,4}$" [(ngModel)]="model.email"
        maxLength="100" #email="ngModel" required [readonly]="odel.assetStatus === 'Done'">
    <mat-error *ngIf="!model.email ">Inspector
        email is required.</mat-error>
    <mat-error *ngIf="email.errors?.maxLength">Max
        length is 100.</mat-error>
    <mat-error *ngIf="(email.errors && (email.invalid || email.touched))">InvalidEmail.</mat-error>
</mat-form-field>

為什么不使用 angular 的EmailValidator

<input matInput type="email" email [(ngModel)]="model.email"

如果您真的想要自定義正則表達式,也許會有所幫助

/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/

現在你的正則表達式有什么問題:

^[a-zA-Z0-9._% -] @[a-zA-Z0-9.-] \.[a-zA-Z]{2,4}$

你做到了,所以你只能有一個字母,而不是空格,而不是@ ,而不是另一個字母,不是空格,不是一個點和 2 或 3 個字母。 所以只有這樣的事情會通過: t @t .com

問題在於空格(在@之后和之前. ),你應該放一個+代替,一切都會奏效:

^[a-zA-Z0-9._% -]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$

我從這篇文章https://www.abstractapi.com/guides/angular-email-validation得到,如果你想在模板驅動的表單上使用正則表達式作為驗證器電子郵件,你可以試試這個模式^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[az]{2,4}$

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM