65.9K
CodeProject 正在变化。 阅读更多。
Home

AngularJS 验证

Tony Jen
starIconstarIconstarIconstarIconstarIcon

5.00/5 (5投票s)

2015年5月19日

CPOL

2分钟阅读

viewsIcon

25423

downloadIcon

412

让我们尝试使用 AngularJS 中的 ng-message 进行验证。

我在这里放了一个 在线预览

此外，如果您不想从 CodeProject 下载源代码，您可以访问我的 github 页面

引言

之前，我写了一篇关于 AngularJS 中验证的技巧。你可以在这里找到这篇文章

但是，其中一个评论希望使用 AngularJS 的 ng-message 指令。我将使用我的原始版本应用程序，但将其重写为使用 ng-message 而不是 ng-show。要使其工作，我们必须包含一个名为 angular-messages.js 的 AngularJS 模块。您可以在这里查看描述并下载源代码

背景

在 Web 应用程序中，验证一直很困难。很多时候，需要使用框架来验证表单值。而且，这些框架通常不能跨所有浏览器工作。 AngularJS 内置了验证功能，因此现在创建跨浏览器工作的验证变得容易多了。

这是验证功能应该是什么样子的截图

Using the Code

使用 angular-message

要使用 angular-message，您必须像这样将其注入到您的应用程序模块中
angular.module("realestateApp", ["ngMessages"]);

现在，您将可以使用 ng-message。

表单

要初始化验证过程，您应该从这样的 form 容器开始

<form name="tenantForm">

现在在 form 里面，您可以获取输入控件并向它们添加验证逻辑。

在验证场景中，我们通常有几个我们想要验证的主要属性。它们是 Required, Minimum, Maximum, Pattern, Email, Number, 和 URL。

必需

如果未输入 required 字段，此属性会强制 form 无效。

<input type="text" required />

最小长度

此属性要求在接受输入之前至少输入一定数量的字符。

<input type="text" ng-minlength=5 />

最大长度

此属性允许输入的最大字符长度，否则验证将失败。

<input type="text" ng-maxlength=20 />

模式匹配

此功能允许使用正则表达式进行自定义匹配。

<input type="text" ng-pattern="[a-zA-Z]" />

电子邮件匹配

Angular 提供自定义电子邮件匹配功能。

<input type="email" name="email" ng-model="user.email" />

数字

这需要输入为数字格式才能进行验证。

<input type="number" name="age" ng-model="user.age" />

URL

这需要输入为链接格式才能进行验证。

<input type="url" name="homepage" ng-model="user.url" />

错误消息

以前，我们使用 error-container，但现在我们可以直接使用 ng-message 指令

<div ng-messages="tenantForm.Email.$error" 
ng-messages-include="messages.html" class="errors"></div>

我们还需要一个 messages.html 文件来存储您的错误消息

<div class="messages">
    <div ng-message="required">Required</div>
    <div ng-message="minlength">Too short</div>
    <div ng-message="maxlength">Too long</div>
    <div ng-message="email">Invalid email address</div>
    <div ng-message="compareTo">Must match the previous entry</div>
    <div ng-message="number">Must be a number</div>
    <div ng-message="url">Must be in URL format</div>
</div>

错误消息覆盖

有时，您需要自定义错误消息，这些消息未在 messages.html 中涵盖。您可以通过为要显示的任何自定义错误消息添加一个特殊的 span 标签来实现这一点

  <div ng-messages="tenantForm.FirstName.$error" 
ng-messages-include="messages.html" class="errors">
     <span class="messages" 
     ng-message="minlength">Must be more than 3 characters</span> 
     <span class="messages" 
     ng-message="maxlength">Must be more than 20 characters</span> 
  </div>

整合

现在我们可以将 messages.html 与 index.html 结合起来。

 <form name="tenantForm" novalidate style="width: 500px">
    <div class="row">
        <div ng-repeat="tenant in tenant">
            <div class="form-group">
                <label>First Name: </label>
                <input type="text"
                       placeholder="First Name"
                       name="FirstName"
                       ng-model="tenant.FirstName"
                       ng-minlength=3
                       ng-maxlength=20 required />
                <div ng-messages="tenantForm.FirstName.$error" 
                     ng-messages-include="messages.html" class="errors">
                    <span class="messages" 
                    ng-message="minlength">Must be more than 3 characters</span> 
                    <span class="messages" 
                    ng-message="maxlength">Must be more than 20 characters</span> 
                </div>
            </div>
            <div class="form-group">
                <label>Home Phone: </label>
                <input type="number"
                       placeholder="Phone Number"
                       name="HomePhone"
                       ng-model="tenant.HomePhone"
                       ng-minlength=7
                       ng-maxlength=10 required />
                <div ng-messages="tenantForm.HomePhone.$error" 
                     ng-messages-include="messages.html" class="errors">
                    <span class="messages" 
                    ng-message="minlength">Must be more than 7 digits</span>
                    <span class="messages" 
                    ng-message="maxlength">Must be less than 11 digits</span>  
                </div>
            </div>
            <div class="form-group">
                <label>Email: </label>
                <input type="email"
                       placeholder="Email"
                       name="Email"
                       ng-model="tenant.Email"
                       required />
                <div ng-messages="tenantForm.Email.$error" 
                     ng-messages-include="messages.html" class="errors"></div>

            </div>
            <div class="form-group">
                <label>Webpage: </label>
                <input type="url"
                       placeholder="Webpage"
                       name="Webpage"
                       ng-model="tenant.Webpage"
                       required />
                <div ng-messages="tenantForm.Webpage.$error" 
                     ng-messages-include="messages.html" class="errors">
                </div>
            </div>
        </div>
    </div>               
</form>

 

<div class="messages">
    <div ng-message="required">Required</div>
    <div ng-message="minlength">Too short</div>
    <div ng-message="maxlength">Too long</div>
    <div ng-message="email">Invalid email address</div>
    <div ng-message="compareTo">Must match the previous entry</div>
    <div ng-message="number">Must be a number</div>
    <div ng-message="url">Must be in URL format</div>
</div>

这种方法感觉比使用 ng-show 指令更简洁。此外，它通过拥有一个集中位置来存储您的错误消息，同时允许自定义消息，从而减少了代码重复。

在我的下一篇文章中，我将讨论拥有一个集中位置来存储验证逻辑以方便维护。此外，我希望为多种语言的错误消息添加国际化支持。

感谢阅读。

历史

  • 版本 1 5/18/2015 创建第一个草稿
© . All rights reserved.