AngularJS 中的验证
在这里，我们将为我们的 AngularJS 应用添加验证逻辑。
更新： 我有一篇关于使用 ng-message 的 AngularJS 验证新特性的新文章。请点击这里查看：
https://codeproject.org.cn/Articles/992545/AngularJS-Validation
引言
我之前写过一篇关于使用 AngularJS 创建一个简单的 CRUD 应用的文章。链接在这里：An Overview of an AngularJS Project。现在，我想添加一个验证层，以确保输入的数据是有效的。对于这个技巧，我只会使用我的一些数据进行验证。
我将使用 Visual Studio 2013 社区版，并带有 AngularJS、Bootstrap 和 Jquery 等依赖项。
我有一个实时预览供您查看，请点击此链接查看：
http://tonyjen.github.io/AngularJSValidation/
背景
在 Web 应用程序中，验证一直都很困难。很多时候，需要使用框架来验证表单值。而且，这些框架通常不能在所有浏览器上工作。AngularJS 自带验证功能，现在创建在所有浏览器上都能工作的验证就容易多了。
这是验证功能应该看起来的样子截图：
Using the Code
表单
要初始化验证过程，您应该从一个 form 容器开始，如下所示：
<form name="tenantForm">
现在在 form 内部，您可以获取输入控件并向它们添加验证逻辑。
在验证场景中，我们通常有一些主要的属性需要验证。它们是“必需”、“最小值”、“最大值”、“模式”、“电子邮件”、“数字”和“URL”。
必需
此属性强制 form 在未输入 required 字段时无效。
<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 的容器开始。然后，我们将遍历每种错误类型并显示正确的错误文本。
<div class="error-container"
ng-show="tenantForm.FirstName.$dirty && tenantForm.FirstName.$invalid">
<small class="text-danger"
ng-show="tenantForm.FirstName.$error.required">
Your name is required.
</small>
<small class="text-danger"
ng-show="tenantForm.FirstName.$error.minlength">
Your name is required to be at least 3 characters
</small>
<small class="text-danger"
ng-show="tenantForm.FirstName.$error.maxlength">
Your name cannot be longer than 20 characters
</small>
</div>
在添加带有数据属性和错误消息类的表单控件后，应用程序将在每个输入控件中执行验证并显示任何验证错误。
整合
因此，在组合表单的输入和验证部分之后，HTML 将如下所示：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Real Estate</title>
<link href="Content/bootstrap.css" rel="stylesheet" />
<link href="realEstateApp/site.css" rel="stylesheet" />
</head>
<body ng-app="realestateApp" class="ng-scope">
<div class="panel panel-default">
<div class="container" ng-controller="tenantsController" ngcloak>
<h1>Tenants</h1>
<div class="row">
<div>
<button class="btn btn-primary" ng-click="previousTenant()">
Previous
</button>
<button class="btn btn-primary" ng-click="nextTenant()">
Next
</button>
<button class="btn btn-success" ng-click="addTenant()">
Add
</button>
<button class="btn btn-danger" ng-click="deleteTenant()">
Delete
</button>
<br style="clear:both">
<br>
</div>
</div>
<form name="tenantForm" style="width: 500px">
<div class="row">
<div ng-repeat="tenant in tenant">
<div>
<label>First Name: </label>
<input type="text"
placeholder="First Name"
name="FirstName"
ng-model="tenant.FirstName"
ng-minlength=3
ng-maxlength=20 required />
</div>
<div class="error-container"
ng-show="tenantForm.FirstName.$dirty && tenantForm.FirstName.$invalid">
<small class="text-danger"
ng-show="tenantForm.FirstName.$error.required">
Your name is required.
</small>
<small class="text-danger"
ng-show="tenantForm.FirstName.$error.minlength">
Your name is required to be at least 3 characters
</small>
<small class="text-danger"
ng-show="tenantForm.FirstName.$error.maxlength">
Your name cannot be longer than 20 characters
</small>
</div>
<div>
<label>Home Phone:</label>
<input type="number"
placeholder="Home Phone"
name="HomePhone"
ng-model="tenant.HomePhone"
ng-minlength=7
ng-maxlength=10 required />
</div>
<div class="error-container"
ng-show="tenantForm.HomePhone.$dirty && tenantForm.HomePhone.$invalid">
<small class="text-danger"
ng-show="tenantForm.HomePhone.$error.required">
Your home phone is required.
</small>
<small class="text-danger"
ng-show="tenantForm.HomePhone.$error.minlength">
Your home phone is required to be at least 7 digits
</small>
<small class="text-danger"
ng-show="tenantForm.HomePhone.$error.maxlength">
Your home phone cannot be longer than 10 digits
</small>
<small class="text-danger"
ng-show="tenantForm.HomePhone.$error.number">
Your home phone cannot be characters
</small>
</div>
<div>
<label>Email:</label>
<input type="email"
placeholder="Email"
name="Email"
ng-model="tenant.Email"
required />
</div>
<div class="error-container"
ng-show="tenantForm.Email.$dirty && tenantForm.Email.$invalid">
<small class="text-danger"
ng-show="tenantForm.Email.$error.required">
Your email is required.
</small>
<small class="text-danger"
ng-show="tenantForm.Email.$error.email">
Your email is not valid
</small>
</div>
<div>
<label>Webpage:</label>
<input class="input-large"
type="url"
placeholder="Webpage"
name="Webpage"
ng-model="tenant.Webpage"
required />
</div>
<div class="error-container"
ng-show="tenantForm.Webpage.$dirty && tenantForm.Webpage.$invalid">
<small class="text-danger"
ng-show="tenantForm.Webpage.$error.required">
Your webpage is required.
</small>
<small class="text-danger"
ng-show="tenantForm.Webpage.$error.url">
Your webpage is not valid
</small>
</div>
</div>
</div>
</form>
</div>
</div>
<script src="Scripts/jquery-1.9.1.js"></script>
<script src="Scripts/angular.js"></script>
<script src="realEstateApp/realestateApp.js"></script>
<script src="realEstateApp/controllers/tenantsController.js"></script>
<script src="realEstateApp/services/tenantService.js"></script>
</body>
</html>
使用 AngularJS 进行验证比使用第三方 jquery 库更简单、更简洁。现在您的应用程序可以在不费太多力气的情况下进行验证。我提供了一个验证一些常见属性的应用程序示例，您可以扩展它或尝试创建自己的应用程序。
历史
- 版本 1 205/5/16