Angular 中的電子郵件驗證

Muhammad Adil 2023年1月30日 2022年4月20日
  1. Angular 中的輸入驗證
  2. 在 Angular 中驗證電子郵件地址的方法
  3. 使用正規表示式和 ng-pattern: 的 AngularJS 驗證(電子郵件)
Angular 中的電子郵件驗證

AngularJS 在客戶端提供了簡單的輸入資料驗證。你的表單上可能存在許多輸入欄位,這將有助於從你的使用者那裡收集資料。但是,在對資料進行任何操作之前,你必須驗證欄位中的值。在本文中,我們將討論如何在 AngularJS 中驗證電子郵件。

Angular 中的輸入驗證

使用驗證來驗證輸入控制元件的資料。如果資訊未通過驗證,使用者將收到錯誤訊息。AngularJS 中存在必填欄位、最小長度、最大長度、模式和許多其他型別的驗證。

AngularJS 中電子郵件驗證的語法:

<form name="Form">

  Code: <input type="text" name="pincode" ng-model="txtpin" ng-pattern="/^[0-9]{1,5}$/" />
  
  <span ng-show="personForm.pincode.$error.pattern"> Only numbers allowed </span>
  
  </form>

在 Angular 中驗證電子郵件地址的方法

Angular 有幾種驗證電子郵件的方法,其中一些在下面列出:

內建驗證:Angular 專門安裝了電子郵件驗證器,你可以使用它來檢查使用者提供的電子郵件地址。

模式驗證:你可以指定正規表示式 (regex) Angular 電子郵件驗證模式,該模式必須在驗證發生之前與使用者提供的值匹配。

電子郵件驗證示例:

<script src="https://code.angularjs.org/1.2.1/angular.min.js"></script>
<div class="container" ng-app="myApp">
<div class="Sample">
    <div class="form-area" ng-controller="formCtrl">  
        <form role="form" name="inquiryForm" novalidate>
        <br style="clear:both">
                    <h3 style="margin-bottom: 25px; text-align: center;">Example</h3>

					<div class="form-group">
						<input name="email" ng-model="email" id="eml" type="text" ng-pattern="eml_add" ng-required="true" autocomplete="off" placeholder="Email" class="form-control" >            
					</div>

            
        <button type="button" id="submit" name="submit" class="btn btn-primary pull-right" ng-disabled="inquiryForm.$invalid">Submit Form</button>
        </form>
    </div>
</div>
</div>

使用正規表示式和 ng-pattern: 的 AngularJS 驗證(電子郵件)

在 AngularJS 中,你可以使用正規表示式 (RegEx) 來形成驗證。你需要使用 ng-pattern 指令來處理表示式。什麼是 ng-pattern?讓我們討論一下。

AngularJS 中的 ng-pattern 指令

angularjs 中的 ng-pattern 用於使用正規表示式驗證輸入文字控制元件。如果根據條件驗證了輸入文字,則 ng-pattern 命令返回 true;否則,它會引發錯誤。要了解有關 ng-pattern 的更多資訊,請單擊此處

在詳細討論之前,你應該對以下指令有所瞭解:

  • ng-minlength:提供最短的可能長度。
  • ng-maxlength:提供最大可能的長度。
  • ng-model: 為欄位分配驗證屬性,例如 $error$valid 等。
  • ng-required: 用於提供必填欄位。
  • ng-show: 此命令根據引數顯示錯誤訊息。

首先,你需要新增 ng-messages 作為模組依賴項,因為它可能是必需的。

<form name="form">
            
  <input type="email" name="emailID" ng-model="email"
      placeholder="Enter an Email ID"
      ng-required="true" 
      ng-pattern=" ^[a-z]+[a-z0-9._-]+@[a-z]+\.[a-z.]{2,5}$"/>

      <div *ngIf="firstEmail.errors || firstEmail.touched">
        <small class="text-danger" *ngIf="firstEmail.errors.required">Primary email is required</small>
    
      </div>
  <input type="submit" ng-disabled="form.$invalid || !email" />

</form>

ng-required="true" 是首先要注意的。這使得有必要填寫輸入表格。然後是 ng-patternng-pattern 指令包含 AngularJS 將驗證以驗證電子郵件 ID 的表示式或模式(你可以新增或刪除值)。

如果使用者輸入的電子郵件地址不符合 XYZ 格式,我們將收到錯誤訊息。

ng-pattern 指令包含 AngularJS 將驗證以驗證電子郵件 ID 的表示式或模式(你可以新增或刪除值)。

最後,讓我們為消費者提供實時錯誤通知,以幫助他們解決所提供電子郵件地址的任何問題。

讓我們新增 div 元素,這將有助於有條件地向使用者顯示錯誤警告。如果電子郵件欄位包含問題,我們將自動使用 *ngIf 指令來呈現此元素。

讓我們為我們在上面的第一步中在 div 標記中設定的每個規則生成單獨的錯誤訊息。讓我們使用表單的錯誤物件和 *ngIf 指令來動態呈現訊息。在轉到 neededpattern 屬性之前,我們將首先檢視錯誤物件是否存在。

Muhammad Adil avatar Muhammad Adil avatar

Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.

Facebook