迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > Angular >

Angular 中的电子邮件验证

作者:迹忆客 最近更新:2023/03/23 浏览次数:

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-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 属性之前,我们将首先查看错误对象是否存在。

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

在 Angular 中上传文件

发布时间:2023/04/14 浏览次数:71 分类:Angular

本教程演示了如何在 Angular 中上传任何文件。我们还将介绍如何在文件上传时显示进度条,并在上传完成时显示文件上传完成消息。

Angular 2 中的复选框双向数据绑定

发布时间:2023/04/14 浏览次数:139 分类:Angular

本教程演示了如何一键标记两个复选框。这篇有 Angular 的文章将着眼于执行复选框双向数据绑定的不同方法。

在 AngularJs 中加载 spinner

发布时间:2023/04/14 浏览次数:107 分类:Angular

我们将介绍如何在请求加载时添加加载 spinner,并在 AngularJs 中加载数据时停止加载器。

在 Angular 中显示和隐藏

发布时间:2023/04/14 浏览次数:78 分类:Angular

本教程演示了 Angular 中的显示和隐藏。在开发商业应用程序时,我们需要根据用户角色或条件隐藏一些数据。我们必须根据该应用程序中的条件显示相同的数据。

在 Angular 中下载文件

发布时间:2023/04/14 浏览次数:104 分类:Angular

本教程演示了如何在 angular 中下载文件。我们将介绍如何通过单击按钮在 Angular 中下载文件并显示一个示例。

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便