Angular의 이메일 유효성 검사

1. Angular의 입력 유효성 검사
2. Angular에서 이메일 주소를 확인하는 방법
3. 정규 표현식 및 ng-pattern:을 사용한 AngularJS 유효성 검사(이메일)

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-패턴이란 무엇입니까? 논의해 봅시다.

AngularJS의 ng-pattern 지시문

angularjs의 ng 패턴은 정규식을 사용하여 입력 텍스트 컨트롤의 유효성을 검사하는 데 사용됩니다. 입력 텍스트가 조건에 따라 검증되면 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-pattern이 옵니다. ng-pattern 지시문에는 AngularJS가 이메일 ID를 확인하기 위해 확인할 표현식 또는 패턴이 포함되어 있습니다(값을 추가하거나 제거할 수 있음).

사용자가 XYZ 형식을 따르지 않는 이메일 주소를 입력하면 오류가 발생합니다.

ng-pattern 지시문에는 AngularJS가 이메일 ID를 확인하기 위해 확인할 표현식 또는 패턴이 포함되어 있습니다(값을 추가하거나 제거할 수 있음).

마지막으로 소비자에게 실시간 오류 알림을 제공하여 제공된 이메일 주소의 문제를 해결할 수 있도록 합시다.

사용자에게 조건부로 오류 경고를 표시하는 데 도움이 되는 div 요소를 추가해 보겠습니다. 이메일 필드에 문제가 있으면 *ngIf 지시문을 자동으로 사용하여 이 요소를 렌더링합니다.

div 태그 내에서 위의 첫 번째 단계에서 설정한 각 규칙에 대해 별도의 오류 메시지를 생성해 보겠습니다. 양식의 오류 개체와 *ngIf 지시문을 사용하여 메시지를 동적으로 렌더링해 보겠습니다. needed 또는 pattern 속성으로 이동하기 전에 먼저 오류 개체가 있는지 확인합니다.