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-pattern。ng-pattern 指令包含 AngularJS 将验证以验证电子邮件 ID 的表达式或模式（你可以添加或删除值）。
如果用户输入的电子邮件地址不符合 XYZ 格式，我们将收到错误消息。
ng-pattern 指令包含 AngularJS 将验证以验证电子邮件 ID 的表达式或模式（你可以添加或删除值）。
最后，让我们为消费者提供实时错误通知，以帮助他们解决所提供电子邮件地址的任何问题。
让我们添加 div 元素，这将有助于有条件地向用户显示错误警告。如果电子邮件字段包含问题，我们将自动使用 *ngIf 指令来呈现此元素。
让我们为我们在上面的第一步中在 div 标记中设置的每个规则生成单独的错误消息。让我们使用表单的错误对象和 *ngIf 指令来动态呈现消息。在转到 needed 或 pattern 属性之前，我们将首先查看错误对象是否存在。
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