[英]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.